Using bassistance jquery-validator with formtowizard plugin

Question

I'm using the FormToWizard Jquery plugin with this Bassistance validation plugin. I have attached my next button to a click event which validates my form however I only want it to validate the current fieldset not the whole form.

What formtowizard does is show one fieldset at a time and generate next and back buttons in each fieldset to browse around the form.

It goes like this:

<form id="SignupForm" method="POST" action="..................">
    <fieldset>
        <legend>Step One</legend>
        <div>

        </div>
    </fieldset>

    <fieldset>
    <legend>Step Two</legend>
        <div>

        </div>
    </fieldset>
</form>

And this is how i declared the bassistance validator

  $("a.next").click(function() {
      $("#formID").validate();
  });

And I found this code from this already answered topic about the very same problem but it doesn't seem to work! Validate between fieldsets

He basically added a few lines of code in an existing FormToWizard plugin method.

function createNextButton(i) {
var stepName = "step" + i;
        $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>");

        $("#" + stepName + "Next").bind("click", function(e) {
            /* VALIDATION */
            if (options.validationEnabled) {
                var stepIsValid = true;
                $("#"+stepName+" :input").each(function(index) {
                    checkMe = element.validate().element($(this));
                    //stepIsValid = !element.validate().element($(this)) && stepIsValid;
                    stepIsValid = checkMe && stepIsValid;
                });
                //alert("stepIsValid === "+stepIsValid);
                if (!stepIsValid) {
                    return false;
                };
            }; 

            $("#" + stepName).hide();
            $("#step" + (i + 1)).show();
            if (i + 2 == count)
                $(submmitButtonName).show();
            selectStep(i + 1,'next');
        });
    }

Any idea how to get this work? I am not a jquery/javascript pro since I am just starting, I am still trying to learn how the syntax work and why that person made those changes.

where did you declared validationEnabled ? – user3284088 Feb 07 '14 at 14:21 — user3284088, Feb 07 '14 at 14:21

score 1 · Accepted Answer · answered Feb 03 '14 at 07:55

1

I found the error. I forgot to declare the variable validationEnabled. Adding that fixed the problem.

answered Feb 03 '14 at 07:55

Wax

323
2
19

Can you specify where you declared validationEnabled? I'm guessing you did $("a.next").click(function() { $("#formID").validate({validationEnabled: true}); }); ? – Jches Oct 10 '14 at 15:03
1

@Jches inside the formtowizard.js `options = $.extend({ submitButton : "Submit", validationEnabled : true }, options); ` – Wax Oct 11 '14 at 22:36

score 0 · Answer 2 · answered Jan 30 '14 at 13:24

0

May give the fieldset an id like <fieldset id="validate"></fieldset> an use the id with your function : $("a.next").click(function() { $("#validate").validate(); });

answered Jan 30 '14 at 13:24

Joofe Kopp

123
2
13

Or use not just only one form. You could split your big form into a few smaller ones. – Joofe Kopp Jan 30 '14 at 13:25

Using bassistance jquery-validator with formtowizard plugin

2 Answers2