CODEWITHSUNDEEP
javascriptjqueryformsjquery-validate
imjp
imjp

Reputation: 6695

jQuery: validating a field that was hidden at first

Ok, this is pretty hard for me to explain but I'm going to do my best.

I have a single form that I have split up into 3 seperate steps to make it easier for the user to process the data. Thanks to jQuery, I'm easily able to do this by hiding and showing elements in the dom, but because of this also, jQuery is having trouble validating data that was hidden initially.

Please take a look at the following form: http://jsfiddle.net/Egyhc/

<form>
  <div id="step1" style="display: block;">
    <label for="first_name">First Name</label>
    <input type="text" value="" name="first_name" id="FirstName"/>

    <label for="last_name">Last Name</label>
    <input type="text" value="" name="last_name" id="LastName"/>
  </div>


  <div id="step2" style="display: none;">
    <label for="first_name">Address</label>
    <input type="text" value="" name="address" id="Address"/> 
  </div>

  <a href="#" id="step1_btn">Continue to step 2</a>
  <input type="submit" id="submit_btn" value="Verstuur" style="display: none;" />
</form>


$(function() {
  $('#step1_btn').click(function() {
    $('#step1, #step1_btn').hide();
    $('#step2, #submit_btn').show();        
  });
});​

As you can see, it's a fairly simple form but when I add validation, only the first "step" works. The second step doesn't get validated.

Below you can find the code where I added the validation:

$(function() {
  $('#step1_btn').click(function() {
    $('form').validate({
      rules: { 
        first_name: "required",
        last_name: "required" 
      }
    });

    if($('form').valid()) {
      $('#step1, #step1_btn').hide();
      $('#step2, #submit_btn').show();   
    }     
  });


  $('#submit_btn').click(function() {
    $('form').validate({
      rules: { 
        address: "required"  
      }
    });

    if($('form').valid()) {
      return true
    }     
  });
});​



Anyone know how I can make the validation work once I get to the second step as well?

Upvotes: 0

Views: 1344

Answers (1)

The Alpha
The Alpha

Reputation: 146201

I've gave the form here because I've modified it (added a back link)

<form>
  <div id="step1" style="display: block;">
      <label for="first_name">First Name</label>
      <input type="text" value="" name="first_name" id="FirstName"/>
      <label for="last_name">Last Name</label>
      <input type="text" value="" name="last_name" id="LastName"/>
  </div>
  <div id="step2" style="display: none;">
    <label for="first_name">Address</label>
    <input type="text" value="" name="address" id="Address"/> 
  </div>

  <a href="#" id="step1_btn">Continue to step 2</a>
  <a href="#" id="step2_btn" style="display:none;" >Back to step 1</a>
  <input type="submit" id="submit_btn" value="Verstuur" style="display: none;" />
</form>

JS

$(function(){
    $('form').validate({
        rules: { 
          first_name: "required",
          last_name: "required",
          address: "required"  
        }
    });

    $('#step1_btn').click(function() {
        if($('form').valid()) {
            $('#step1, #step1_btn').hide();
            $('#step2, #submit_btn').show(); 
            $('#step2_btn').show();       
        }     
    });

    $('#step2_btn').click(function() {
        $(this).hide();
        $('#step1, #step1_btn').show();
        $('#step2, #submit_btn').hide();  
    });            

    $('#submit_btn').click(function() {
        if($('form').valid()) {
            return true
        }     
    });
});

DEMO.

Upvotes: 3

Related Questions