Question

所以基本上我有一个使用一些Angular的表单，它是一个注册表单并且有很多字段，所以为了更好的用户体验，我们决定使用angular来创建一个＆＃39; next＆＃39;按钮一半通过表单将用户带到表单的后半部分而不刷新页面。但是，使用所需的基本验证很复杂，因为如果用户在第一页上错过了某些内容，然后点击了第二页上的提交按钮，那么该字段是必需的＆＃39;消息将闪烁，但用户无法看到它，因为它出现在第一个屏幕上。

有没有办法使用angularJS或jquery验证插件分别验证表单的每一半？即当我点击“下一步”时，我可以验证表单的前半部分吗？因此，如果没有先填写上半部分，用户就无法进入表格的后半部分。

只是一个简单的说明：我尝试使用Jquery Validation插件，但因为我也使用了角度，所以当我点击下一个按钮时它会确认一次，但仍然允许我继续下一页。

希望这个问题有道理，欢呼！

Answer 1

尝试：

$("#form").validate();

您还可以选择使用以下方法尝试和验证哪些元素：

$("#form").validate().element("#id");

这将手动触发验证过程而不提交结果，它还可以让您选择要验证的元素。

Answer 2

您可以完全以角度方式执行此操作，因为您在表单中使用了角度。您也可以在提交函数中添加一个检查，无论任何字段是否无效，在发送帖子请求之前也是如此。

<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>

Answer 3

也许您可以使用keyup function。像这样：

$("input[type='email']").keyup(function(evt){
     validate($(this).val());
});

validate是一个检查输入值的函数。

无论如何，如果您想使用keyup功能，您可以执行this之类的操作。

有没有办法在点击按钮时验证表单的一部分而不首先实际提交表单？

3 个答案: