Question

我的表格如下图所示。但是点击提交按钮表单提交时没有验证...我正在使用spring security，因此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();
      }
    }

您需要创建一个角度控制器，其功能可以在ng-submit上运行。该函数将查找表单是否无效并阻止它发布表单。它允许您查看错误消息。

角形验证问题 - 角度验证没有发生

1 个答案: