jquery validate不支持动态内容

jquery validate is not working with dynamic content

jquery validate不支持动态内容

I use jquery to create tabs with new content.

我使用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 new tabs when click button

单击按钮时添加新选项卡

$("#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++;
}

Validate Form into tabs. It work with tabs-1 but not work with tabs-2

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

    });

Code 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>

How to validate content into tabs-2 ?

如何在tabs-2中验证内容?

2 个解决方案

#1

When you add your new tab, you need to manually add rules to validate for the new content. The easiest way is probably to use the rules method of the validation plugin.

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

At the bottom of your addTab function, you would do something like this:

在addTab函数的底部,你会做这样的事情:

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

#2

The problem may be jquery is not aware of a dom update if you dont use live or on methods

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

try to put the validate method on an "on" click method like

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

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

Please accept an answer as Laurence suggested

请接受Laurence建议的答案

put like this

像这样

$("#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();
           }

    });
});