javascript - jQuery: Validating fields before submitting (multistep form) - Stack Overflow

admin管理员组

文章数量:1321037

I have a form which consists of 2 steps. What I'd like to do is validate each step before continuing to the next; the user should not be able to get to step 2 of step 1's fields are invalid.

js fiddle: /
Below you can find the simplified version of the form:

<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').hide();
    $('#step2, #submit_btn').show();        
  });
});​

How do you guys suggest I achieve this?

I have a form which consists of 2 steps. What I'd like to do is validate each step before continuing to the next; the user should not be able to get to step 2 of step 1's fields are invalid.

js fiddle: http://jsfiddle/Egyhc/
Below you can find the simplified version of the form:

<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').hide();
    $('#step2, #submit_btn').show();        
  });
});​

How do you guys suggest I achieve this?

• javascript
• jquery
• forms

Share Improve this question Follow asked Jun 15, 2012 at 14:31 imjpimjp 6,6951111 gold badges4949 silver badges5858 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

There's a very neat setting of jQuery validate that lets you ignore validation on hidden fields. So you can handle the show/hide logic of your steps and for validation you could just do this:

As this suggests: ignore hidden

$("form").validate({
   ignore: ":hidden"
});

If you need to check for validation on something besides the default form submit, you can use the valid method like this: $("form").valid().

I noticed you don't have any validation classes on your form, so I'm assuming you're handling that somewhere else. Just in case you're not, you can tell jQuery validate your rules through css classes like this: <input type="text" class="required digits"/>

See more here: http://bassistance.de/2008/01/30/jquery-validation-plugin-overview/

本文标签： javascriptjQuery Validating fields before submitting (multistep form)Stack Overflow