具有相同表单名称的Jquery验证 [英] Jquery Validation with Identical Form Names

问题描述

我有一个做两件事的表格:

I have a form that does 2 things:

1. 将名字和电子邮件地址传递给PHP.
2. 如果用户想提交多于一组或两套数据，则在点击时动态添加一组新的名称/电子邮件字段.

由于我不知道每个用户可以选择提交多少个集合，因此我将数据通过数组传递给PHP(使用名称后接[])，因此我可以使用foreach循环并始终获取每个数据集.以下是一些代码，可以帮助您更好地理解:

Since I don't know exactly how many sets every user may choose to submit, I pass the data to PHP in an array (using a name followed by []), so I can use a foreach loop and always get every data set. Here is some code for better understanding:

<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 []会在提交时得到验证.您必须单击任何其他具有相同名称的字段才能使验证正常工作(就像懒惰验证仅在焦点之后才生效)

The problem is, however, that only the first friendName[] and friendEmail[] get validated on submission. You have to click on any other fields with the same name to get validation working (Like the lazy validation only kicks in after focus)

如何在表单字段中使用相同的名称，并同时验证所有这些名称?

How can I use the same name for a form field, and get all of them validated at the same time?

推荐答案

请按照以下步骤操作.

Follow the below steps.

1)打开jquery.validate.js文件
2)查找checkForm:function(){
3)用下面的代码替换此功能.

1) Open jquery.validate.js file
2) Find checkForm: function() {
3) Replace this function with below code.

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();
}

这篇关于具有相同表单名称的Jquery验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！