[validate] Multi-step form, how to validate only the current step?

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

[validate] Multi-step form, how to validate only the current step?

jcarouth

I am trying to get a form with similar functionality to the demo shown
on http://www.mredesign.com/demos/jQuery-accordion-w-validation/#thedemo
but I'm having a problem that I cannot figure out. When attempting to
navigate from the first step to the second via the "Next" button the
validator.form() method validates the entire form rather than the
current step. What I don't understand is that the exact same code
works on the MreDesign.com demo. Here's what I'm doing:

//javascript
$(document).ready(function(){
        // accordion functions
        var accordion = $("#stepForm").accordion({autoheight: false});
        var current = 0;

        $.validator.addMethod("pageRequired", function(value, element) {
                var $element = $(element)
                function match(index) {
                        return current == index && $(element).parents("#sf" + (index +
1)).length;
                }
                if (match(0) || match(1) || match(2)) {
                        return !this.optional(element);
                }
                return "dependency-mismatch";
        }, $.validator.messages.required)

        var v = $("#proposalForm").validate({
                errorClass: "error",
                errorPlacement: function(error, element) {
                        element.parent('.input').prepend(error);
                        element.parent('.input').addClass('error');
                },
                errorElement: "h5",
                onkeyup: false,
                onblur: false,
                submitHandler: function() {
                        alert("Submitted, thanks!");
                },
                debug: true
        });

        // back buttons do not need to run validation
        $("#sf2 .prevbutton").click(function(){
                accordion.activate(0);
                current = 0;
        });
        $("#sf3 .prevbutton").click(function(){
                accordion.activate(1);
                current = 1;
        });
        // these buttons all run the validation, overridden by specific
targets above
        $(".open2").click(function() {
          if (v.form()) {
            accordion.activate(2);
            current = 2;
          }
        });
        $(".open1").click(function() {
          if (v.form()) {
            accordion.activate(1);
            current = 1;
          }
        });
        $(".open0").click(function() {
          if (v.form()) {
            accordion.activate(0);
            current = 0;
          }
        });

});


//markup
<form id="proposalForm" action="" method="post" enctype="multipart/
form-data">
                <ul id="stepForm">
                        <li>
                                <div class="ui-accordion-left"></div>
                                <a href='#' class="ui-accordion-link">
                                <div class="ui-accordion-right"></div>
                                </a>

                                <fieldset class="proposal">
                                        <legend> Step 1 of 3 </legend>

                                                <h2>Tell us which department you are member of</h2>
                                                <div class="input">
                                                        <label for="dept">TAMU Department</label>
                                                        <select name="department" id="dept" class="input required">
                                                                <option value="">- Choose -</option>
                                                                <option value="23" selected="selected">Research &amp; Graduate
Studies</option>
                                                        </select>
                                                </div>
                                                <div class="buttonWrapper">
                                                        <input id="sf1n" name="formNext1" type="button" class="open1
nextbutton" value="Continue" alt="Continue" title="Continue" />
                                                </div>

                                </fieldset>
                        </li>

                        <li>
                                <div class="ui-accordion-left"></div>
                                <a href='#' class="ui-accordion-link">
                                <div class="ui-accordion-right"></div>
                                </a>
                                <fieldset class="proposal">
                                        <legend> Step 2 of 3 </legend>

                                        <h2>Check the boxes that are TRUE</h2>

                                        <div class="input">
                                                <input type="checkbox" name="sigdean" id="sigdean"
class="required" />
                                                <label class="checkbox" for="sigdean">I received approval via
signature of my Dean</label>
                                        </div>

                                        <div class="input error">
                                                <h5>Problem!</h5>
                                                <input type="checkbox" name="sigdepthead" id="sigdepthead"
class="required" />
                                                <label class="checkbox" for="sigdepthead">I received approval
via signature of my Department Head</label>
                                        </div>
                                        <div class="input">
                                                <input type="checkbox" name="sigpi" id="sigpi" class="required" /
>
                                                <label class="checkbox" for="sigpi">I have signed the proposal
indicating my own approval</label>
                                        </div>

                                        <div class="buttonWrapper">
                                                <p class="open0 prevbutton">Back</p>
                                                <input name="formNext2" type="button" class="open2 nextbutton"
value="Continue" alt="Continue" title="Continue" />
                                        </div>

                                </fieldset>
                        </li>
                        <li>
                                <div class="ui-accordion-left"></div>
                                <a href='#' class="ui-accordion-link">
                                <div class="ui-accordion-right"></div>
                                </a>
                                <fieldset class="proposal">
                                        <legend> Step 3 of 3 </legend>

                                        <h2>Select the document(s) that apply to your proposal</h2>

                                        <input type="file" name="proposal" disabled="disabled" />
                                        <div class="buttonWrapper">
                                                <p class="open1 prevbutton">Back</p>
                                                <input type="submit" id="submit" value="Submit"
class="submitbutton" alt="Submit" title="Submit" />
                                        </div>
                                </fieldset>
                        </li>
                </ul>
        </form>
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Re: [validate] Multi-step form, how to validate only the current step?

gtgstd
May be this tutorial http://www.rubyglob.com/validating-a-multistep-form-with-coffeescript-jquery/ will help you as it also has validation on each current step at a time and it's pretty easy to follow the idea.

jcarouth wrote
I am trying to get a form with similar functionality to the demo shown
on http://www.mredesign.com/demos/jQuery-accordion-w-validation/#thedemo
but I'm having a problem that I cannot figure out. When attempting to
navigate from the first step to the second via the "Next" button the
validator.form() method validates the entire form rather than the
current step. What I don't understand is that the exact same code
works on the MreDesign.com demo. Here's what I'm doing:
Loading...