CODEWITHSUNDEEP
jqueryformsjquery-validate
Katie7
Katie7

Reputation: 879

jQuery validate plugin allows submit when validation fails. Form is using .load

I have built a form which is paginated (jQuery ajax style) over 6 pages. I'm trying to get the jQuery validate plugin to work with it.

At the bottom of the form is a 'next' button which submits the values for that page to the database and loads the next 'page' into the #pagination div using jQuery .load().

I have just added jQuery validation to the form using the jQuery validate plugin, but the validation flashes on the screen for a second and the page moves on to the next page anyway. I'd be grateful for any help! I'd like to allow the form to move to the next page if the validation is successful, but not if it is unsuccessful. Here is my code (I have boiled it down to be as simple as possible):

jQuery

jQuery(document).ready(function(){
    jQuery("#survey").validate();   
    var page=1; //Set first page on load
    jQuery("#pagination").load("survey_"+page+".htm");

    jQuery("#next").click(function(){

        if(page !== 6){
            page=page+1;}
        if(page == 6){
            jQuery('#next').replaceWith('<button id="submit" type="button">Submit</button>');
        }
        else
        {page == 6;}

    jQuery("#pagination").load("survey_"+page+".htm");
 });

HTML

<form class="survey" id="survey" method="post" action="">
    <div id="pagination">
</div>
<div class="nav"><input id="prev" type="submit" value="Previous" ><input class="submit" id="next" value="Next" name="submit" type="submit" /></div>
</form>

The form pages are in 6 separate files called survey_1.htm, survey_2.html....survey_6.htm, and as you can see above, they are loaded using .load().

As mentioned, I'd like to allow the form to move to the next page if the validation is successful, but not if it is unsuccessful. At the moment, the validation flashes on screen before the next page is loaded.

Many thanks!

Upvotes: 0

Views: 2588

Answers (2)

DiegoF
DiegoF

Reputation: 1

Whether you're looking to validate the form that came from the method .load(), try this here:

HTML

<div class="continent-type">
     <label for="people">What is your continent?</label>
     <input type="radio" name="continent" value="A">The Americas
     <input type="radio" name="continent" value="E">European
</div>
<div id="form-load"></div>

JQuery

function validateForm(form){
     form.validate({
          rules:{
               // rules...
          },
          messages:{
               // messages...
     });
};
jQuery('input[name=continent]').on('click', function(){

     var continent= jQuery(this).val();

     jQuery("#form-load").load('/get-form.html', {continent:continent}, function(){
          validateForm($(this).find('form'));
     });
});

Upvotes: 0

Sparky
Sparky

Reputation: 98738

Quote OP: "As mentioned, I'd like to allow the form to move to the next page if the validation is successful, but not if it is unsuccessful. At the moment, the validation flashes on screen before the next page is loaded."

It's moving to the next page because your page loading logic is bypassing the built-in click handler of the Validation plugin.

It's not very clear to me how your page loading scheme is ultimately going to work. However, in order to use ajax along with the jQuery Validate plugin, you would leverage its built-in submitHandler callback function. In other words, the submitHandler function is only fired off when the form passes the validation test.

Something like this...

jQuery(document).ready(function(){

    jQuery("#survey").validate({
        submitHandler: function(form) {
            // your ajax loading logic
            // form.submit(); // use this to finally submit form data at the last step
            return false;  // prevent form submit because you are doing the ajax
        }
    });

});

Working Demo: http://jsfiddle.net/zpkm2/

Also note your code:

else
    {page == 6;}

should probably be:

else
    {page = 6;}

== is for comparison of value, and = is for setting the value.

Upvotes: 1

Related Questions