javascript — входные данные динамического добавления массива Vaildate — jQuery Validate
Добрый день,
Динамические поля добавляются с помощью jQuery, и я использую плагин jQuery Validate для проверки формы.
Код для создания динамических полей зависит от количества выбранных опций в окне выбора.
$('#ids_noct').on('change', function() {
var tsd = ( this.value );
for(var j=1; j <= tsd; j++) {
$("#t").append("<input name="name_ct[]" id="id_ct' + j + '" type="text"class="form-control" placeholder="Add Variant' + j + ' Name" >");
}
});
Код JQuery для проверки:
$("#formsx").validate({
rules: {
"name_ct[]": {required: true}
}
Но с этим только первое поле проверяется не все.
Предположим, что если я добавил 5 полей, то 1 из 5 проверяет, а не все.
Также я хочу знать, могу ли я загрузить изображение с помощью PHP и jQuery Validate.
});
Решение
У вас есть пара основных проблем в вашем коде. Во-первых, ваш вызов добавления не имеет правильно установленных кавычек — вы не можете начать с двойных кавычек, а затем включить в них двойные кавычки, это вызовет ошибку. Итак, ваш звонок должен выглядеть примерно так:
$("#t").append('<input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
Во-вторых, вы не можете иметь ввод текста типа с тем же атрибутом имени. Так что, если у вас есть 5 из этих входов name_ct, каждый из них должен иметь свое собственное имя:
$("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
Наконец, когда вы добавляете новое поле после $.validate был вызван, вы также должны обновить правила для него:
$('#ids_noct').on('change', function() {
var tsd = ( this.value );
for(var j=1; j <= tsd; j++) {
$("#t").append('<input name="name_ct'+j+'" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >');
$('#id_ct'+j).rules('add',{
required:true
});
}
});
Не зная, что именно вы хотите сделать с этими значениями name_ct, я не могу сказать, как вы должны их рекомбинировать, но в submitHandler $ .validate, вы можете изменить данные так, как вам нужно, прежде чем делать $.post,
Смотрите это работает здесь: http://jsfiddle.net/ryleyb/6syqa60d/
Другие решения
Пожалуйста, найдите соответствующий пример решения ниже:
HTML:
<form name="signupForm" class="cmxform" id="signupForm" method="get" action="">
<select name="category[]" id="cat_1">
<option value="">Select One</option>
<option value="1">aa</option>
<option value="2">bb</option>
<option value="3">cc</option>
<option value="4">dd</option>
</select>
<select name="category[]" id="cat_2">
<option value="">Select One</option>
<option value="5">ee</option>
<option value="6">ff</option>
<option value="7">gg</option>
<option value="8">hh</option>
</select>
<select name="category[]" id="cat_3">
<option value="">Select One</option>
<option value="9">ii</option>
<option value="10">jj</option>
<option value="11">kk</option>
<option value="12">ll</option>
</select>
<input class="submit" type="submit" value="Submit">
</form>
Теперь мы будем использовать плагин проверки jquery jquery.validate.js для проверки формы. Условием будет то, что пользователю придется выбирать категорию из каждого выпадающего списка. Скрипт для проверки будет выглядеть так:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript">
$().ready(function() {
// validate the comment form when it is submitted
$("#signupForm").validate({
rules: {
"category[]": "required"},
messages: {
"category[]": "Please select category",
}
});
});
</script>
Теперь проблема в том, что готовый jquery.validate.js проверяет только первый элемент категории []. Итак, нам нужно немного его изменить.
В jquery.validate.js мы можем найти функцию с именем checkForm, мы должны изменить ее, как показано ниже:
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();
}
Попробуй использовать
$.validator.addClassRules("customer", { cRequired: true });
из документации http://jqueryvalidation.org/reference