2

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>

如何验证 tabs-2 中的内容？

4

2 回答 2

1

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

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

$('#'+id).find('input').rules('add',{
    required: true
});
于 2012-11-01T15:11:48.733 回答
0

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

尝试将验证方法放在“打开”单击方法上，例如

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

请接受劳伦斯建议的答案

像这样放

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

    });
});
于 2012-11-01T03:49:55.687 回答