2

I have tab with the following fields

 <div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab1</a> </li>
    <li><a href="#tabs-2">Tab2</a></li>
    <li><a href="#tabs-3">Tab3</a></li>
    <li><a href="#tabs-4">Tab4</a></li>
  </ul>
  <div id="tabs-1">
     <b>Name</b>
  <input type="text" id="name"><br/>
  <b>Age</b>
  <input type="text" id="age"><br/>
    <input type="submit" value="next" id="submit"/>
  </div>
  <div id="tabs-2">
  <form name="nithin">

  </div>
   <div id="tabs-3">
    <p>Tab3</p>
  </div>
   <div id="tabs-4">
    <p>Tab4</p>
  </div>
</div> 
<input type="checkbox" name="tabs-2" value="2">tabs-2 
<input type="checkbox" name="tabs-3" value="3">tabs-3 
<input type="checkbox" name="tabs-4" value="4">tabs-4 
<br>

Here tab-1 has two fields.The second tab of this must be enable only after the completion of the validation of first tab.We can select show/hide using the checkbox but will not activated.How can I do this? You can see the code DEMO

Nithin Viswanathan
  • 3,245
  • 7
  • 39
  • 84
  • do you have the validation script or do you need one? – Spokey Apr 19 '13 at 13:40
  • @Spokey-I didn't included it yet.It contains only empty field checking – Nithin Viswanathan Apr 19 '13 at 13:41
  • Wouldn't it be easier to allow all tabs since the beginning, but to set "disabled" to all the inputs from the others tabs than tab-1. Then when you click on the button from tab-1 (in the callback), select all the inputs from tab-2 and remove their "disabled" attribute? Same for next tabs ? – Ricola3D Apr 19 '13 at 14:34

1 Answers1

2

In this example the input submit has the class submit. I also changed the tab ids (see fiddle)

FIDDLE http://jsfiddle.net/Spokey/2aQ2g/54/

$('.submit').click(function (e) {
    e.preventDefault(); //prevent from submission and do script instead
    //validation ....
    //if validation is okay, do below
    var nexttab = parseInt($(this).parent().next().attr('id').match(/\d+/g), 10);
    $('#tabs').tabs("enable", nexttab).tabs("select", nexttab);
    $('input[name="tabs-'+nexttab+'"]').removeAttr('disabled').prop('checked', true);
});
Spokey
  • 10,974
  • 2
  • 28
  • 44