Question

jquery validate无法使用动态内容

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

var tabCounter = 2,
tabTemplate = "<li><a href='#{href}'>#{label}</a> <span class='ui-icon ui-icon-    close'>Remove Tab</span></li>";
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( "<div id='" + id + "'><p>" + tabContentHtml + "</p></div>" );
    tabs.tabs( "refresh" );
    tabCounter++;
}

将表单验证到选项卡中。它适用于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

 <form id="Form" method="post" action="">       
<div id="tabs">
<ul>
    <li>
        <a href="#tabs-1">Visa 1</a> 
        <!-- <span class="ui-icon ui-icon-close">Remove Tab</span> -->
    </li>
</ul>
<div id="tabs-1">
    <table class="content-tabs">
        <tr class="fieldgroup">
            <td>Full Name</td>  
            <td><input type="text" class="txtName" name="name"></td>
        </tr>
                    <tr></td colspan="2"><input type="submit" value="submit" /></td></tr>
            </table>
        </div>
     </div>
  </form>

如何将内容验证到标签-2？

Answer 1

添加新标签页时，需要手动添加规则以验证新内容。最简单的方法可能是使用验证插件的rules方法。

在addTab功能的底部，您可以执行以下操作：

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

Answer 2

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

尝试将验证方法放在“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();
           }

    });
});

jquery validate不适用于动态内容

2 个答案: