Vaildate動態添加陣列輸入 - jQuery驗證

Question

下午好，

動態字段被添加與jQuery和我使用jQuery驗證插件來驗證表單。

創建動態字段的代碼取決於選擇框中選定選項的數量。

$('#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驗證。 }）;

Answer 1

你的代碼中有幾個基本的問題。首先，你的append調用沒有正確設置引號 - 你不能以雙引號開頭，然後在其中包含雙引號，它會引發錯誤。所以，你的電話應該看起來更像是這樣的：

$("#t").append('<input name="name_ct[]" id="id_ct' + j + '" type="text" class="form-control" placeholder="Add Variant' + j + ' Name" >'); 

其次，你不能有相同名稱的屬性類型的文本輸入。所以，如果你有這些name_ct投入5，他們每個人都需要有自己的名字：

$("#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只驗證類[]的第一個元素。所以，我們需要修改一下。

在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