通过引导选项卡验证 ajax 生成的内容

Question

我有一个选项卡设置，其中每个选项卡的内容都是通过 ajax 加载的。 #tab1 是静态的 - 并且经过验证的表单可以通过在页面加载时运行的 $(".validate").validate() 正常工作。 但在tab2 中存在相同的形式 - 它根本没有得到验证。 我假设它是因为调用初始函数时不存在第二种形式。 但即使我在运行 ajax 时再次调用 validate() 函数 - 即使那样，表单也不会被验证。

HTML：

<div class="tabbable">
<ul class="nav nav-tabs">
  <li class="active"><a href="#tab1" data-toggle="tab">Personal Details</a></li>
  <li><a href="test-content.html" class="ajax" data-toggle="tab">Finances</a></li>
</ul>
<div class="tab-content">
  <div class="tab-pane active" id="tab1">
          <form name="ftblPaymentsadd" id="ftblPaymentsadd" action="#" method="post" enctype="multipart/form-data" class="validate" >
            <input type="text" name="sss" class="required">
            <input type="submit" value="go">
          </form>
  </div>
  <div class="tab-pane active" id="tab2">
       <!-- content will be loaded via ajax -->
  </div>
</div>
</div>

内容来自text-content.html:

 <form name="ftblPaymentsaddww" id="ftblPaymentsaddww" action="#2" method="post" enctype="multipart/form-data" class="validate" >
 <input type="text" name="ssswwws" class="required">
 <input type="submit" value="go">
 </form>

JS：

$('.nav-tabs .ajax').click(function (e) {
      var thisTab = e.target // activated tab
      var pageTarget = $(thisTab).attr('href');
      var itemNumber = $(this).parent().index()+1;
      $('.tab-pane').removeClass('active');
      $("#tab"+itemNumber).html('loading...');
      $("#tab"+itemNumber).load(pageTarget,function(){
          $(".validate").validate();
      }).addClass('active');
});                 

Answer 1

当您调用$(".validate").validate() 时，您只是在页面上第一次 出现.validate 类时初始化插件。 This is a limitation of the plugin，不是 jQuery。

一种解决方法是将.validate() 方法包装在.each()...中...

$(".validate").each(function() {
    $(this).validate();
});

但是，只有在调用时所有表单都已存在时，这才有效。您正在尝试以完全不同的新创建表单第二次调用.validate()。通常这会起作用，但在您的情况下它会失败，因为您再次使用相同的 jQuery 类选择器（请参阅上面的问题）。除此之外，.validate()不能在同一个表单上被多次调用......所有后续调用都将被忽略。

最好的办法是为每个表单分配一个唯一 id，这样您就可以分别调用.validate() 方法，因为您需要在每个表单上初始化插件。