如何使用jquery validate驗證表單的動態部分

我創建了一個JSFiddle。我動態地添加一個包含輸入元素的div（在真實應用中有多個字段）。當我點擊提交時，它只驗證第一個而不是動態添加的HTML元素。我確保動態元素具有唯一的ID。如何使用jquery validate驗證表單的動態部分

有什麼想法？

$('#submit').click(function (e) {  
    e.preventDefault(); 
    validator = $("#myForm").validate({ 
     rules: { 
      name: "required" 
     } 
    }); 
    $("#myForm").valid(); 
});

更新： - 我發現了一些奇特。當我添加一個新的輸入元素，然後專注於這個新的輸入並單擊提交，我可以在螢火蟲中看到，jquery自動爲此輸入標記添加一個「class = error」，而不顯示錯誤消息。如果我嘗試向第二個輸入寫入內容，它會從第一個輸入中刪除錯誤消息。

來源

2013-05-29 parsh

我使用jQuery 2.0和jQuery驗證1.11.1 – parsh

你不應該有兩個文本輸入具有相同的'name'。該值應該是獨一無二的。您的驗證規則將僅匹配「name = name」的第一個匹配項。 –

看到這個小提琴作爲使用不同的值在您的驗證規則與不同的輸入名稱配對使用的示例：http://jsfiddle.net/h4VuD/ –

更改您的標記這（您提交按鈕是在表單標籤外）

<form id="myForm"> 
    <div id="section"> 
     <input type="text" name="name" class="required"/> 
    </div> 
    <input type="button" id="add" value="add" /> 
    <input type="submit" id="submit" value="submit" /> 
</form>

和你的jQuery內onready你有這樣的

var count = 0; 
$("#myForm").validate(); 
$('#add').on('click', function() { 
    var section = $('#section').clone(false).attr('id', function() { 
     return 'section' + (count); 
    }); 
    section.find('input').attr('name', function() { 
     return 'name' + (count); 
    }); 
    section.find('label').attr('for', function() { 
     return 'name' + (count); 
    }); 
    section.insertAfter('#section'); 
    count++; 
});

這給你你所需要的：

每個輸入都有一個唯一的名字
標籤匹配相應的輸入字段

updated fiddle here

來源

2013-05-30 13:32:52

謝謝。在@TravisJ提到'name'屬性後，我能夠找出soln。如果他沒有把它轉換回答，我會將你的標記作爲答案。無論如何+1是一個「清潔」實施比我的。 – parsh

如何使用jquery validate驗證表單的動態部分

回答

相關問題