具有相同表单名称的 Jquery 验证 [重复]答案

【问题标题】：Jquery Validation with Identical Form Names [duplicate]具有相同表单名称的 Jquery 验证 [重复]
【发布时间】：2009-06-25 02:23:41
【问题描述】：

我有一个做两件事的表单：

将名字和电子邮件地址传递给 PHP。
在点击时动态添加一组新的姓名/电子邮件字段，以防用户想要提交多于一组或两组数据。

由于我不知道每个用户可以选择提交多少个集合，我将数据以数组的形式传递给 PHP（使用名称后跟 []），因此我可以使用 foreach 循环并始终获取每个数据集。下面是一些代码以便更好地理解：

<form method="post" action="submit.php" id="formID">
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="contacts">
<tr>
    <td><label class="namelabel"><span>Friend's First Name:</span><input type="text" name="friendName[]" class="friendName" id="name1" /></label></td>
    <td><label class="emaillabel"><span>Friend's Email:</span><input type="text" name="friendEmail[]" class="friendEmail" id="email1" /></label></td>
</tr>
</table>
<p class="addmore"><a href="#" id="addclick">Click Here To Send This To More Friends</a></p>
<input type="submit" value="Spread The News!" name="submit" />
    </form>
<script language="javascript" type="text/javascript" src="include/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="include/jquery.validate.pack.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        fieldCount = 1;
        $("#addclick").click(function(e){
            e.preventDefault();
            fieldCount+=1;
            $('#contacts tr:last').after('<tr><td><label class="namelabel"><span>Friend\'s First Name:</span><input type="text" name="friendName[]" class="friendName" id="name' + fieldCount + '" /></label></td><td><label class="emaillabel"><span>Friend\'s Email:</span><input type="text" name="friendEmail[]" class="friendEmail" id="email' + fieldCount + '" /></label></td></tr>');
        });
        $("#formID").validate({
rules: {
    "friendName[]": "required",
    "friendEmail[]": "required email",
  }
});
        });
    </script>

然而，问题是只有第一个friendName[] 和friendEmail[] 在提交时得到验证。您必须单击具有相同名称的任何其他字段才能进行验证（就像惰性验证仅在焦点后启动）

如何为表单字段使用相同的名称，并同时验证所有字段？

【问题讨论】：

标签： javascript jquery jquery-validate

【解决方案1】：

按照以下步骤操作。

1) 打开 jquery.validate.js 文件
2) 查找 checkForm: function() {
3）用下面的代码替换这个函数。

checkForm: function() {
    this.prepareForm();
    for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
        if (this.findByName( elements[i].name ).length != undefined && this.findByName( elements[i].name ).length > 1) {
            for (var cnt = 0; cnt < this.findByName( elements[i].name ).length; cnt++) {
                    this.check( this.findByName( elements[i].name )[cnt] );
            }
        } else {
            this.check( elements[i] );
        }
    }
    return this.valid();
}

【讨论】：

【解决方案2】：

这不起作用，因为每个动态添加的项目都需要一个唯一的名称，请查看关于这个确切问题的 SO 帖子。

Using JQuery Validate Plugin to validate multiple form fields with identical names

【讨论】：

我可以给每个元素一个唯一的名字（事实上，我已经用上面的代码给每个元素一个唯一的ID），但这否定了使用friendName []之类的名字的有用性并将一组值传递给 PHP。我想传递一个数组来减少后端所需的逻辑，所以我不必考虑每一个可能的数据集数量（或对数量设置硬限制） - 我可以循环$_POST['friendName'] 带有一个 foreach。
如果您有更好的方法来处理 PHP 中无限数量的名称和电子邮件数据集，每个数据集都有一个唯一的名称，不过，我会全力以赴！

【解决方案3】：

我对 JQuery 成语有点不放心。但是，将此回调添加到验证调用是有效的：

submitHandler: function(form) {
  var els = $('.friendName, .friendEmail');
  for (var i = 0; i < els.length; i++) {
    $(form).validate().element(els[i]);
  }
}

显然知道 JQuery 习语（又名 hlep1！）的人可以删除分配给 els 和循环。

只有在表单有效时才会调用提交处理程序。一旦检查了每个名称的第一个实例，该表单就有效。另一种方法是破解/猴子补丁您的插件以删除该检查。

【讨论】：

els.each(function() { $(form).validate().element(this); });