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()方法，因为您需要在每个表单上初始化插件

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

1 个答案: