Подтверждение динамического поля jQuery

Question

Добрый день, я наткнулся на следующий вопрос.

Я использую плагин проверки jQuery для проверки моей клиентской части формы v1.13.0.

Работает нормально.

Но проблема, которую я не могу решить это:

У меня есть имя поля «продукт []», который является массивом. Возможно, у меня есть один или два продукта в этом массиве.

Вот мой код:

data_emissao: {required: true}, 
forma_pagamento: {required: true}, 
produto[]: {required: true}, // tried this with no sucess 

Любой когда-либо столкнуться с этой проблемой?

Answer 1

Если вы используете produto в качестве массива, вы должны указать его индекс или он не будет работать должным образом. Попробуйте использовать produto[0], указав, что вам требуется хотя бы одно значение в вашем массиве.

Answer 2

два вопроса ...

1) Если имя поля содержит квадратные скобки, точки или другие специальные символы, то вы должны заключить имя в кавычки.

"produto[]": { 
    required: true 
} 

2) Однако, если input не содержит это точное имя, name="produto[]", то он не будет работать, как вы не можете объявить массив в rules опции .validate(). Опция rules принимает только список имен отдельных полей.

---

Два возможных решения ...

1) Вы можете использовать метод .rules() следующим образом. Использование селектора jQuery «начинается с» для выбора всего массива и jQuery .each() для применения метода .rules('add') для каждого поля в этой группе.

$('[name^="produto"]').each(function() { // select elements using "starts with" selector 
    $(this).rules('add', { 
     required: true, 
     // other rules 
    }); 
}); 

2) Тем не менее, если только правило required, то вам не нужно будет объявить его с помощью любого JavaScript на всех. Вместо этого вы можете использовать только атрибут HTML5 required, и плагин jQuery Validate все равно подберет его.

<input type="text" name="produto[0]" required="required" /> 
<input type="text" name="produto[1]" required="required" /> 
<input type="text" name="produto[2]" required="required" /> 
<input type="text" name="produto[3]" required="required" /> 
<input type="text" name="produto[4]" required="required" />