有没有一种方法可以在单击按钮时验证表单的一部分，而无需先实际提交表单？
Posted
技术标签:
【中文标题】有没有一种方法可以在单击按钮时验证表单的一部分，而无需先实际提交表单？【英文标题】：Is there a way to validate a part of a form on the click of a button without actually submitting the form first? 【发布时间】：2016-01-21 14:12:54 【问题描述】：所以基本上我有一个使用一些 Angular 的表单，它是一个注册表单并且有很多字段，所以为了更好的用户体验，我们决定使用 Angular 在表单的中途创建一个“下一步”按钮将用户带到表单的后半部分而不刷新页面。但是，使用必需的基本验证是复杂的，因为如果用户错过了第一页上的某些内容，然后单击第二页上的提交按钮，“此字段是必需的”消息将闪烁但用户看不到它，因为它出现了在第一个屏幕上。
有没有办法使用 angularJS 或 jquery 验证插件之类的东西分别验证表单的每一半？ IE。我可以在单击“下一步”按钮时验证表单的前半部分，这样用户在不先填写前半部分的情况下就无法进入表单的后半部分。
简单说明一下：我尝试使用 Jquery Validation 插件，但由于我也在使用 angular，所以当我单击下一个按钮时，它会验证一次，但仍然允许我进入下一页。
希望这个问题有意义，干杯！
【问题讨论】：
【参考方案1】：当您在表单中使用角度时，您可以完全以角度方式执行此操作。您还可以在发送发布请求之前在您的提交函数中添加检查是否有任何字段无效。
<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>【讨论】：
我正在适应/实现这一点，到目前为止一切都很好！非常感谢，如果我遇到任何问题，我会告诉你【参考方案2】：尝试：
$("#form").validate();
您还可以选择使用哪些元素来尝试和验证：
$("#form").validate().element("#id");
这将在不提交结果的情况下手动触发验证过程，并且还可以让您选择要验证的元素。
【讨论】：
感谢您的快速回复！这确实有效，它确实正确验证了该字段，但是我的下一个按钮现在根本不起作用。目前我有这个：Next 还有 JS： $(function() $("#nextBtn1").on('click', function() console.log('clicked'); $("#registerIndividualForm ").validate().element('#firstName'); ); ); 你能提供一个链接让我自己测试吗？ 我们正在使用 xampp 和本地主机，因为我们还没有在服务器上，所以很遗憾我无法提供链接 也许您可以仅将相关部分复制到小提琴jsfiddle.net？【参考方案3】：也许您可以使用keyup function。像这样的：
$("input[type='email']").keyup(function(evt)
validate($(this).val());
);
validate 是一个检查输入值的函数。
无论如何，如果您想使用keyup 函数，您可以执行this 之类的操作。
【讨论】：
我试过这个： $(function() $("input[type='email']").keyup(function(evt) $('#registerIndividualSeller').validate ( 规则： 电子邮件： 必需：true，电子邮件：true ); ); );无济于事，你是这个意思吗？ 我是新手，如何将代码正确插入评论/问题？ 当你开始写评论时，你会看到这样的文字：“评论使用 mini-Markdown 格式：link italic boldcode . "
如果您可以将您的代码复制到jsFiddle，我们将有更多选项为您提供正确答案以上是关于有没有一种方法可以在单击按钮时验证表单的一部分，而无需先实际提交表单？的主要内容，如果未能解决你的问题，请参考以下文章