Jquery проверки с одинаковой формы имен

Question

У меня есть форма, что делает 2 вещи:

1. Передаёт имя и адрес электронной почты для PHP.
2. Динамически добавлять новый набор полей имени/электронной почты одним щелчком мыши, если пользователь хочет отправить более одного или двух наборов данных.

Поскольку я не знаю точно, сколько наборов каждый пользователь может отправить, я передаю данные в 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 [] получить подтверждено на представления. Вам нужно щелкнуть по любым другим полям с тем же именем, чтобы получить валидацию (как ленивая проверка только после того, как фокус)

Как я могу использовать одно и то же имя для поля формы и получить все из них, в то же время?

Answer 1

Это не сработает, потому что каждому динамически добавленному элементу требуется уникальное имя, ознакомьтесь с этим сообщением на SO об этой точной проблеме.

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

Answer 2

Я немного шаткий на JQuery идиомы. Однако добавление этого обратного вызова для вызова валидации работает: (! Ака hlep1)

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

Очевидно кто-то, кто знал, что JQuery идиомы может удалить Присвоить els и петли.

Обработчик отправки вызывается только после того, как форма действительна. Форма действительна после проверки первого экземпляра каждого имени. Альтернативой было бы взломать/обезвредить ваш плагин, чтобы удалить эту проверку.

Answer 3

Следуйте инструкциям ниже.

1) Открыть файл jquery.validate.js
2) Найти checkForm: функция() {
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(); 
}