jquery - 由于必需的属性，一页上的多个表单会导致验证冲突

Question

我的页面上有两个表单:注册 和登录。

注册表单很简单，并且有一些字段具有必填属性，例如

<form name="register" id="register" method="post" enctype="multipart/form-data">
  <input type="text" name="forename" required />
  .... many more fields here ...
<input type="submit" value="Register" />
</form>

<form name="sign-in" id="sign-in" method="post" enctype="multipart/form-data">
  <input type="text" name="username" required />
  <input type="password" name="password" required />
  <input type="submit" value="Sign In" />
</form>

登录表单只需要您的用户名和密码。但问题是，当我单击提交按钮登录时，我收到来自 register 表单的验证错误，要求我输入我的名字。但我不想注册!我只想登录。为什么提交登录表单会导致注册表单检查验证？

我该如何解决这个问题，以便它们的表单完全独立运行？我使用了 JQuery 表单验证，并有一个适用于像这样绑定(bind)的所有表单的通用验证器:

$('form').validate({
// common validation rules in here
)}

从评论中我可以看出这就是问题所在。但如何解决这个问题并仍然为网站上的所有表单提供通用的验证功能？

Answer 1

为每个表单标签添加一个 id:

<form id="form1">

</form>
<form id="form2">

</form>

并使用 jQuery 单独循环遍历每个:

$('form').each(function(){ ... generic validation for all forms here ... });