CODEWITHSUNDEEP
jquerytwitter-bootstrapjquery-validate
kneidels
kneidels

Reputation: 914

Validating ajax-generated content via bootstrap tabs

I have a tab setup, where the content of each tab, is loaded in via ajax. #tab1 is static - and the validated form works as it should, via $(".validate").validate() which is run on page load. but in tab2 there is the same form - and it does not get validated at all. I assume its because the second form does not exist when the initial function is called. but even if i call the validate() fucntion again when the ajax is run - even then, the form is not validated.

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>

content coming from 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');
});

Upvotes: 0

Views: 603

Answers (1)

Sparky
Sparky

Reputation: 98718

When you call $(".validate").validate(), you are only initializing the plugin on the first occurrence of the .validate class on the page. This is a limitation of the plugin, not jQuery.

A workaround is to wrap the .validate() method within an .each()...

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

However, that will only work if all of the forms already exist when it is called. You're trying to call .validate() a second time on a totally different and newly created form. Normally this would work, but in your case it fails since you're again using the same jQuery class selector (see issue above). Add to that the fact that .validate() cannot be called multiple times on the same form(s)... all subsequent calls are ignored.

The best thing to do is to assign a unique id to each form so you can call the .validate() method separately as you need to initialize the plugin on each one.

Upvotes: 1

Related Questions