角度表单验证问题 - 角度验证没有发生

我的表单如下所示。但点击提交按钮表单提交与验证...我使用弹簧安全，所以xhr调用将不允许在服务器上的另一个页面上重定向（所以我必须给网址的行动）。如果我删除 “NOVALIDATE” 页面正在采取默认的HTML验证角度表单验证问题 - 角度验证没有发生

<form name="loginForm" id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" novalidate> 
 
\t \t <div class="panel-body"> 
 
\t \t \t <div class="form-group has-feedback"> 
 
\t \t \t \t <input type="email" name="j_username" ng-model="j_username" 
 
\t \t \t \t \t class="form-control placeholder-color" placeholder="Email" 
 
\t \t \t \t \t ng-pattern="/^[a-zA-Z0-9._-][email protected][a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/" 
 
\t \t \t \t \t required autocomplete="off" /> 
 
\t \t \t \t <div class="form-devider"></div> 
 
\t \t \t \t <div ng-messages="loginForm.j_username.$error" 
 
\t \t \t \t \t ng-if="loginForm.$submitted"> 
 
\t \t \t \t \t <div class="has-error" ng-message="required"> 
 
\t \t \t \t \t \t <spring:message code="peak.email.required" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="has-error" ng-message="pattern"> 
 
\t \t \t \t \t \t <spring:message code="peak.enter.valid.email" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="form-group has-feedback"> 
 
\t \t \t \t <input type="password" name="j_password" id="j_password" 
 
\t \t \t \t \t placeholder="Password" class="form-control placeholder-color" 
 
\t \t \t \t \t ng-model="j_password" required autocomplete="off" /> <%-- <input 
 
\t \t \t \t \t type="hidden" name="url" id="url" placeholder="Password" 
 
\t \t \t \t \t ng-model="link" 
 
\t \t \t \t \t ng-init="link='${pageContext.request.contextPath}/j_spring_security_check'" /> --%> 
 
\t \t \t \t <div class="form-devider"></div> 
 
\t \t \t \t <div ng-messages="loginForm.j_password.$error" 
 
\t \t \t \t \t ng-if="loginForm.$submitted"> 
 
\t \t \t \t \t <div class="has-error" ng-message="required"> 
 
\t \t \t \t \t \t <spring:message code="peak.password.required" /> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <div id="login-error-box1" style="display: none"></div> 
 
\t \t <button type="submit" 
 
\t \t \t class="btn btn-block custome-btn-orange pbi-mt15"> 
 
\t \t \t <spring:message code="peak.login" /> 
 
\t \t </button> 
 
\t </form>

预先感谢

来源

2015-10-15 kiran

请参阅：http://stackoverflow.com/questions/14524020/angular-js-does-not-allow-preventdefault-or-return-false-to-work-on-form-submiss/22443139#22443139。 – curiousgeek

你需要有一个ng-submit，如果它无效，就不要发布你的表单。 – curiousgeek

我的表单是动作指定的，那么我如何使用ng-submit？ – kiran

在这个plnkr看看：http://plnkr.co/edit/rZaKXEp7vspvEerFtVH8?p=preview

$scope.validate = function(isValid,$event){ 
     console.log(isValid); 
     console.log($scope.loginForm); 
     if(!isValid){ 
     $event.preventDefault(); 
     } 
    }

你需要创建一个角控制器具有在ng-submit上运行的功能。该功能将查找表单是否无效并阻止其发布表单。它可以让你看到你的错误信息。

来源

2015-10-15 19:04:03 curiousgeek

感谢回复。我只想看到提交按钮单击上的错误消息。我改变了这样的掠夺者，但没有什么是... http://plnkr.co/edit/kH9znu?p=preview – kiran

loginForm。$提交将永远是错误的，因为你正在阻止该行动。相反，在作用域中声明一个名为$ scope.isSubmitted的变量，并在控制器方法中将其设置为true以进行验证。在你的ng-if条件中在变量中使用它。 – curiousgeek

角度表单验证问题 - 角度验证没有发生

回答

相关问题