所以基本上我有一个使用一些 Angular 的表单，它是一个注册表单并且有很多字段，所以为了更好的用户体验，我们决定使用 Angular 在表单的中途创建一个“下一步”按钮将用户带到表单的后半部分而不刷新页面。但是，使用必需的基本验证是复杂的，因为如果用户错过了第一页上的某些内容，然后单击第二页上的提交按钮，“此字段是必需的”消息将闪烁但用户看不到它，因为它出现了在第一个屏幕上。
有没有办法使用 angularJS 或 jquery 验证插件之类的东西分别验证表单的每一半？ IE。我可以在单击“下一步”按钮时验证表单的前半部分，这样用户在不先填写前半部分的情况下就无法进入表单的后半部分。
简单说明一下：我尝试使用 Jquery Validation 插件，但由于我也在使用 angular，所以当我单击下一个按钮时，它会验证一次，但仍然允许我进入下一页。
希望这个问题有意义，干杯！
【问题讨论】：
标签： javascript jquery angularjs forms validation
当您在表单中使用角度时，您可以完全以角度方式执行此操作。您还可以在发送发布请求之前在您的提交函数中添加检查是否有任何字段无效。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>
<h2>Validation Example</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
name="myForm" novalidate>
<div ng-show="!next">
<p>Username:<br>
<input type="text" name="user" ng-model="user" required>
<span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<span ng-show="myForm.user.$error.required">Username is required.</span>
</span>
</p>
<p>Email:<br>
<input type="email" name="email" ng-model="email" required>
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
<span ng-show="myForm.email.$error.required">Email is required.</span>
<span ng-show="myForm.email.$error.email">Invalid email address.</span>
</span>
</p>
<input type="button" ng-disabled="myForm.user.$invalid || myForm.email.$invalid" ng-click="movenext()" value="Next" />
</div>
<div ng-show="next">
<input type="button" ng-click="prev()" value="Previous" /><br>
<p>Password:<br>
<input type="password" name="password" ng-model="password" required>
<span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
<span ng-show="myForm.password.$error.required">Password is required.</span>
</span>
</p>
<p>
<input type="submit"
ng-disabled="myForm.password.$invalid">
</p>
</div>
</form>
<script>
var app = angular.module('myApp', []);
app.controller('validateCtrl', function($scope) {
$scope.next = false;
$scope.movenext = function(){
$scope.next = true;
}
$scope.prev = function(){
$scope.next = false;
}
});
</script>
</body>
</html>【讨论】：
尝试：
$("#form").validate();
您还可以选择使用哪些元素来尝试和验证：
$("#form").validate().element("#id");
这将在不提交结果的情况下手动触发验证过程，并且还可以让您选择要验证的元素。
【讨论】：
【讨论】：