Vaildate動態添加的數組輸入-jQuery驗證

Question

下午好，

動態字段與jQuery一起添加，我正在使用jQuery Validate插件來驗證表單。

創建動態字段的代碼取決於selectbox中所選選項的數量。

$('#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個字段，則5個中的1個是有效的，不是全部。

另外，我想知道我可以使用PHP和jQuery Validate上傳圖像。 }）;

Answer 1

您的代碼中有幾個基本問​​題。 首先，您的append調用未正確設置引號-您不能以雙引號開頭，然后在其中加雙引號，這將引發錯誤。 因此，您的呼叫應更像這樣：

$("#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中，可以在執行$.post之前更改所需的數據。

看到它在這里工作： http : //jsfiddle.net/ryleyb/6syqa60d/

Answer 2

請在下面找到相關的示例解決方案：

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僅驗證category []的第一個元素。 因此，我們需要對其進行一些修改。

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

Answer 3

嘗試使用

$.validator.addClassRules("customer", { cRequired: true });

來自文檔http://jqueryvalidation.org/reference