jquery驗證不適用於動態添加的輸入

編輯更新到最新發現在窗體上插入新的INPUT時，我確保指定INPUT爲必需的。我得到了與輸入相同的類以及不起作用的類。但是，工具提示不會出現在動態添加的輸入元素上，而是在文檔就緒時應用tooltipster時出現在那裏。jquery驗證不適用於動態添加的輸入

我能做的是，如果我通過每個新創建的元素和有效（）它工具提示顯示和驗證工作正常。依靠表單valid（）跳過新添加的元素。希望這是足夠的要求的代碼。我試過插入帶有和沒有「必需」選項的元素。還有其他的事情必須完成嗎？預計當最終元素是這樣的：

$("#save").click(function() 
{ 
    setToolTips(); //make sure tooltipster is assigned to newly createde elements 
    var addedValid = true; 
    //needed to do validation on newly created elements 
    $('input.added').each(function() { 
     if(!$(this).valid()) 
      addedValid = false; 
    }); 

    if (!$('#create_project').valid() || !addedValid) return false; 
    //irrelevant after this 
}); 

$(".add_milestone span ").click(function() { 

    var html = '' + 
     '<input data-rule-required="true" required="required" id="milestone_' + current_milestone + '" type="text" ' + 
     '    class=" w250 error added" aria-required="true" />' + 
     '</div>'; 

    $(".items").append(html); 
    current_milestone++; 
}); 

function setToolTips(position) { 
    if (position == 'undefined') 
     position = 'right'; 
    $('form :input[required],:input[id="phone"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: position, // display the tips to the right of the element 
     autoClose : true, 
     hideOnClick : true, 
     delay: 100, 
     timer : 1200, 
     theme: 'tooltipster-light' 
    }); 
} 

$("#save").click(function() 
{ 
    setToolTips(); //make sure tooltipster is assigned to newly createde elements 
    var addedValid = true; 
    //needed to do validation on newly created elements 
    $('input.added').each(function() { 
     if(!$(this).valid()) 
      addedValid = false; 
    }); 

    if (!$('#create_project').valid() || !addedValid) return false; 
    //irrelevant after this 
}); 

$(".add_milestone span ").click(function() { 

    var html = '' + 
     '<input data-rule-required="true" required="required" id="milestone_' + current_milestone + '" type="text" ' + 
     '    class=" w250 error added" aria-required="true" />' + 
     '</div>'; 

    $(".items").append(html); 
    current_milestone++; 
}); 

function setToolTips(position) { 
    if (position == 'undefined') 
     position = 'right'; 
    $('form :input[required],:input[id="phone"]').tooltipster({ 
     trigger: 'custom', // default is 'hover' which is no good here 
     onlyOne: false, // allow multiple tips to be open at a time 
     position: position, // display the tips to the right of the element 
     autoClose : true, 
     hideOnClick : true, 
     delay: 100, 
     timer : 1200, 
     theme: 'tooltipster-light' 
    }); 
}

來源

2015-09-13 kos

我可以驗證Tooltipster和jQuery驗證很好地工作在一起。但是，你怎麼可能期望任何人知道你在沒有看到任何代碼的情況下犯了錯誤？ – Sparky

嗯，我希望這將是我沒有做的初始化。我發現，form.validate中的新元素不會自動觸發驗證。如果我做 $（'input.added'）。each（function（）{if（this）.valid（）） addedValid = false; }）;驗證和tooltipster工作。 – kos

*「驗證不會自動觸發新元素」*〜這是沒有意義的，也不是插件的工作原理。真的，沒有你的代碼的上下文沒有任何意義！在您的問題中發佈相關代碼，然後在下面發佈您的答案。否則，你可能只是在關閉之前刪除整個事物。 – Sparky

我有檢查代碼並發現你已經使用$(this).valid() 我覺得這是你的錯誤。你必須使用形式的ID代替$(this)

因此，對於即：

$('#formID').valid()

來源

2015-09-15 18:09:25

$（this）.valid（） - 在迭代新創建的元素以使其工作時。這是因爲我$（'＃create_project'）.valid（）沒有驗證這些元素。 – kos

jquery驗證不適用於動態添加的輸入

回答

相關問題