jQuery validationEngine and .click() function for a submit button

Question

I have that code:

jQuery(document).ready(function () {
    // binds form submission and fields to the validation engine
    jQuery("#form1").validationEngine();
});

and

jQuery(function () {
    jQuery(".button").click(function () {

        var rx1 = jQuery("input#p_scnt").val();
        var name = jQuery("input#name").val();
        var phone = jQuery("input#phone").val();
        var email = jQuery("input#email").val();
        var rx1 = jQuery("input#p_scnt").val();
        var rx2 = jQuery("input#p_scnt_2").val();
        var rx3 = jQuery("input#p_scnt_3").val();
        var rx4 = jQuery("input#p_scnt_4").val();
        var rx5 = jQuery("input#p_scnt_5").val();
        var rx6 = jQuery("input#p_scnt_6").val();
        var rx7 = jQuery("input#p_scnt_7").val();
        var rx8 = jQuery("input#p_scnt_8").val();
        var rx9 = jQuery("input#p_scnt_9").val();
        var rx10 = jQuery("input#p_scnt_10").val();
        var rx11 = jQuery("input#p_scnt_11").val();
        var rx12 = jQuery("input#p_scnt_12").val();

        var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&rx1=' + rx1 + '&rx2=' + rx2 + '&rx3=' + rx3 + '&rx4=' + rx4 + '&rx5=' + rx5 + '&rx6=' + rx6 + '&rx7=' + rx7 + '&rx8=' + rx8 + '&rx9=' + rx9 + '&rx10=' + rx10 + '&rx11=' + rx11 + '&rx12=' + rx12;
        //alert (dataString);return false;

        jQuery.ajax({
            type: "POST",
            url: "http://www.page.com/lib/process.php",
            data: dataString,
            success: function () {
                jQuery('#form_content').html("<div id='message'></div>");
                jQuery('#message').html("<h2>Rx Refill Request Submitted!</h2>")
                    .append("<p>Thank you for choosing Our Pharmacy</p>")
                    .hide()
                    .fadeIn(1500, function () {
                    jQuery('#message').append("<img id='checkmark' src='http://www.page.com/images/check.png' />");
                });
            }
        });
        return false;
    });
});

Form validation works itself when I jumping between fields but when I will leave those required fields empty and will submit that form it will go without any validation for required fields.

Any clue where I have done mistake?

Answer 1

Found an issue - it was related to the validationEngine plugin itself (some kind of internal error). Got version 2.2 and rewrote code to

        jQuery(document).ready(function() {

        jQuery("#form1").validationEngine('attach', {
          onValidationComplete: function(form, status){
            if (status == false){
                alert("All information must be provided for your refill request to be completed.");
            }
            else {
                var rx1 = jQuery("input#p_scnt").val();
                var name = jQuery("input#name").val();
                var phone = jQuery("input#phone").val();
                var email = jQuery("input#email").val();
                var rx1 = jQuery("input#p_scnt").val();
                var rx2 = jQuery("input#p_scnt_2").val();
                var rx3 = jQuery("input#p_scnt_3").val();
                var rx4 = jQuery("input#p_scnt_4").val();
                var rx5 = jQuery("input#p_scnt_5").val();
                var rx6 = jQuery("input#p_scnt_6").val();
                var rx7 = jQuery("input#p_scnt_7").val();                                
                var rx8 = jQuery("input#p_scnt_8").val();                                
                var rx9 = jQuery("input#p_scnt_9").val();                                
                var rx10 = jQuery("input#p_scnt_10").val();                                
                var rx11 = jQuery("input#p_scnt_11").val();                                
                var rx12 = jQuery("input#p_scnt_12").val();                                                            

                var dataString = 'name='+ name + '&email=' + email + '&phone=' + phone + '&rx1=' + rx1 + '&rx2=' + rx2 + '&rx3=' + rx3 + '&rx4=' + rx4 + '&rx5=' + rx5 + '&rx6=' + rx6 + '&rx7=' + rx7 + '&rx8=' + rx8 + '&rx9=' + rx9 + '&rx10=' + rx10 + '&rx11=' + rx11 + '&rx12=' + rx12;
                //alert (dataString);return false;

                jQuery.ajax({
              type: "POST",
              url: "http://www.page.com/lib/process.php",
              data: dataString,
              success: function() {
                jQuery('#form_content').html("<div id='message'></div>");
                jQuery('#message').html("<h2>Rx Refill Request Submitted!</h2>")
                .append("<p>Thank you for choosing Our Pharmacy.</p>")
                .hide()
                .fadeIn(1500, function() {
                  jQuery('#message').append("<img id='checkmark' src='http://www.page.com/images/check.png' />");
                });
              }
             });
    return false;                   
            }

          } 
        });

And final got it to work.

Answer 2

Try this...

jQuery(function () {
        jQuery(".button").click(function () {
            jQuery("#form1").validationEngine('attach', {
                onValidationComplete: function (form, status) {
                    if (status == true) {
                        var rx1 = jQuery("input#p_scnt").val();
                        var name = jQuery("input#name").val();
                        var phone = jQuery("input#phone").val();
                        var email = jQuery("input#email").val();
                        var rx1 = jQuery("input#p_scnt").val();
                        var rx2 = jQuery("input#p_scnt_2").val();
                        var rx3 = jQuery("input#p_scnt_3").val();
                        var rx4 = jQuery("input#p_scnt_4").val();
                        var rx5 = jQuery("input#p_scnt_5").val();
                        var rx6 = jQuery("input#p_scnt_6").val();
                        var rx7 = jQuery("input#p_scnt_7").val();
                        var rx8 = jQuery("input#p_scnt_8").val();
                        var rx9 = jQuery("input#p_scnt_9").val();
                        var rx10 = jQuery("input#p_scnt_10").val();
                        var rx11 = jQuery("input#p_scnt_11").val();
                        var rx12 = jQuery("input#p_scnt_12").val();

                        var dataString = 'name=' + name + '&email=' + email + '&phone=' + phone + '&rx1=' + rx1 + '&rx2=' + rx2 + '&rx3=' + rx3 + '&rx4=' + rx4 + '&rx5=' + rx5 + '&rx6=' + rx6 + '&rx7=' + rx7 + '&rx8=' + rx8 + '&rx9=' + rx9 + '&rx10=' + rx10 + '&rx11=' + rx11 + '&rx12=' + rx12;
                        //alert (dataString);return false;

                        jQuery.ajax({
                            type: "POST",
                            url: "http://www.page.com/lib/process.php",
                            data: dataString,
                            success: function () {
                                jQuery('#form_content').html("<div id='message'></div>");
                                jQuery('#message').html("<h2>Rx Refill Request Submitted!</h2>")
                                .append("<p>Thank you for choosing Our Pharmacy.</p>")
                                .hide()
                                .fadeIn(1500, function () {
                                    jQuery('#message').append("<img id='checkmark' src='http://www.page.com/images/check.png' />");
                                });
                            }
                        });
                    }
                }
            })
        })
    });