jQuery form validation taking too long on submit

Question

There is fairly complex php POST form with great deal of data validation using jQuery like below. However, I'm running into some problems cause it seems like form is getting submitted before the validation gets completed.

Question : Is it possible that the validation is taking so long, that the form is submitted by default, before jQuery has even returned true or false? If so, what is the best way to deal with this?

jQuery('#order-form').submit(function(){

// Validate many different fields in various ways

if (valid)
   return true;
else
   return false;

});

Answer 1

Since we can't see your code and how it validates, maybe you can try your function another way. Try and use the click function on your submit button to validate your items, then if all is good, submit.

eg

$('#btn1').click(function(e){
    var valid

    if($('#ex1').val() == ""){
        valid = false;
    }else{
         valid = true;   
    }

    if(valid){
        $("#testform").submit();
    }else{
         alert("not validated");  
    }

    e.preventDefault();
});

See fiddle as example.

http://jsfiddle.net/em62Z/1/

Also I use this plugin to validate my forms. It can validate any size form and even some complex fields.

https://github.com/posabsolute/jQuery-Validation-Engine

It works well and might save your trouble doing your own validation if you are doing your own.

Answer 2

Here is the code snippet as an example for contact form that can help you, i used jqueryvalidation.org plugin and posting form using ajax

$(function() {

        var form = $("#contact_form").validate();

        $('#progressbar').hide();     
        $('#success').hide();
        $('#failure').hide();

    $(document).ajaxStart(function() {
       $( "#progressbar" ).show();
     });
    $(document).ajaxStop(function() {
       $( "#progressbar" ).hide();
     });


    $("form#contact_form").submit(function() {
        if(form.valid())
        {   
          //any other validations here

          var name = $("#txtName").val();
          var email = $("#txtEmail").val();
          var phone = $("#txtPhone").val();
          var message = $("#txtMessage").val();

          $.ajax({
            url: "process_contact.php",
            type: "POST",
            data: {'name': name,
                    'email': email,
                    'phone': phone,
                    'message': message},
            dataType: "json",
            success: function(data) {
                  if(data.status == 'success')
                  {
                        $('#contact_form').hide();                                
                        $('#success').show();
                  }
                  else if(data.status == 'error')
                  {
                        $('#failure').show();
                  }
                }

      });
      return false;
        }
    });
  });

Answer 3

As far as I know, only two conditions that your case could happen :

1. there is an error in your validation's code, or
2. javascript is turned off.

In regard of client side validation, have you tried jQuery Validation? It validate every elements in form on two events :

1. everytime elements are changed, and
2. when form is submitted.

You could also add custom method to do a unique validation for each condition in each element.

For more info and examples (with and without ajax) regarding jQUery Validation : here .