Angular表单验证问题——Angular表单验证没有发生

Question

我的表单如下所示。但是在点击提交按钮时，表单在没有验证的情况下提交…我使用spring安全，所以xhr调用不允许从服务器重定向到另一个页面(所以我必须在行动中给出url)。如果我删除"novalidate"页面将采用默认的html验证

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

提前感谢

Answer 1

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

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

你需要创建一个angular控制器，并在ng-submit上运行一个函数。该函数将查找表单是否无效并阻止其提交表单。