jquery validate不支持动态内容

jquery validate不支持动态内容

我使用jquery创建包含新内容的标签。

var tabCounter = 2, tabTemplate = "
#{label} Remove Tab
"; var tabs = $( "#tabs" ).tabs(); var tabContentHtml = $("#tabs-1").html(); 

单击按钮时添加新选项卡

 $("#add_tab").click(function(){ addTab(); }); function addTab() { var label = "Tab " + tabCounter, id = "tabs-" + tabCounter, li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) ); tabs.find( ".ui-tabs-nav" ).append( li ); tabs.append( "
" + tabContentHtml + "
" ); tabs.tabs( "refresh" ); tabCounter++; } 

将表单validation到选项卡中。 它适用于tabs-1但不适用于tabs-2

  $("#Form").validate({ rules:{ name: "required", messages:{ name: "Please enter your name" }, errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); }, submitHandler: function(form) { form.submit(); } }); 

代码HTML

  
 
 
 
 Visa 1 <!-- Remove Tab --> 
 
 
 
 
 
Full Name
 
 
 
 
 
 
  

如何在tabs-2中validation内容？

Answer 1

添加新选项卡时，需要手动添加规则以validation新内容。 最简单的方法可能是使用validation插件的规则方法。

在addTab函数的底部，你会做这样的事情：

 $('#'+id).find('input').rules('add',{ required: true }); 

Answer 2

问题可能是如果你不使用live或on方法，jquery不知道dom更新

尝试将validate方法放在“on”点击方法上

 $("#Form").on ('click',handler) 

请接受Laurence建议的答案

像这样

 $("#Form").on("click", function(event){ $(this).validate({ rules:{ name: "required", messages:{ name: "Please enter your name" }, errorElement: "div", wrapper: "div", errorPlacement: function(error, element) { offset = element.offset(); error.insertBefore(element) error.addClass('message'); // add a class to the wrapper error.css('position', 'absolute'); error.css('left', offset.left + element.outerWidth()); }, submitHandler: function(form) { form.submit(); } }); });