How do I validate a form without submitting and go to other page with jquery mobile and Jquery validation?

Question

So I\'m trying to validate a JQM form that has 4 parts and are divided in different pages so after I validate the first part I want to go to the second, if the form it\'s va

Answer 1

There are various approaches to stepped forms.

When I create multi-step forms, I use a unique set of <form> tags for each section. Then I use the .valid() method to test the section before moving to the next. (Don't forget to first initialize the plugin; call .validate(), on all forms on DOM ready.)

Then on the last section, I use .serialize() on each form and concatenate them into a data query string to be submitted.

Something like this...

$(document).on('pageinit', function() { // dom ready handler for jQuery Mobile

    $('#form1').validate({ // initialize form 1
        // rules
    });

    $('#gotoStep2').on('click', function() { // go to step 2
        if ($('#form1').valid()) {
            // code to reveal step 2 and hide step 1
        }
    });

    $('#form2').validate({ // initialize form 2
        // rules
    });

    $('#gotoStep3').on('click', function() { // go to step 3
        if ($('#form2').valid()) {
            // code to reveal step 3 and hide step 2
        }
    });

    $('#form3').validate({ initialize form 3
        // rules,
        submitHandler: function (form) {
           // serialize and join data for all forms
           var data = $('#form1').serialize() + '&' + $('#form2').serialize() + '&' + $(form).serialize()
           // ajax submit
           return false; // block regular form submit action
        }
    });

    // there is no third click handler since the plugin takes care of this 
    // with the built-in submitHandler callback function on the last form.

});

Important to remember that my click handlers above are not using type="submit" buttons. These are regular buttons, either outside of the form tags or type="button".

Only the button on the very last form is a regular type="submit" button. That is because I am leveraging the plugin's built-in submitHandler callback function on only the very last form.

"Proof of Concept" DEMO: http://jsfiddle.net/8bnZV/

BTW, notice how I replaced your outdated .bind() with the more modern .on() method.

Also, see for reference:

https://stackoverflow.com/a/17975061/594235

Answer 2

Edit: clearly not a valid answer since the pages are in individual divs ;)

Is there any reason you're using .bind like that?

This section of validate code looks fine:

$('#sampleProperties').validate({
  rules:{
    station: 'required',
    date: 'required',
    singleMultiContainer: 'required',
    containerCuantity:{
        required:'true',
        minlength:1,
        maxlength:40
    }
  },
  submitHandler: function(form) {
     alert('Success!');
  }
});

Conversely (your title is ambiguous) if you're wanting a way to validate the form without jquery.validate, you could simply bind some validation functions to the keyUp event on the various input boxes.