jquery validate不适用于动态内容 [英] jquery validate is not working with dynamic content

问题描述

jquery validate不适用于动态内容

jquery validate is not working with dynamic content

我使用jQuery来创建新内容的制表符。

I use jquery to create tabs with new content.

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++;
}

将表单验证为选项卡。它与tab-1配合使用，但不适用于tab-2

Validate Form into tabs. It work with tabs-1 but not work with 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？

How to validate content into tabs-2 ?

推荐答案

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

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.

在 addTab 函数的底部，您可以这样做：

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

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

这篇关于jquery validate不适用于动态内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！