角度表單驗證問題 - 角度驗證沒有發生

我的表單如下所示。但點擊提交按鈕表單提交與驗證...我使用彈簧安全，所以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

角度表單驗證問題 - 角度驗證沒有發生

回答

相關問題