jQuery validation validate only on form submit

Sam Deering

If your using the jQuery validation plugin you might sometimes see a stutter validation when your typing in an input field. This is most commonly seen when your using custom validation rules which are firing off ajax requests to validate the users input, such as checking if a users email is unique in the database. Stutter = no good.

To remove the consant validation checking add the following parameters to the form validate function:

   onkeyup: false,
   onclick: false,
   onfocusout: false,

So your validation function might look something like this:

$("#form").validate(
{
   onkeyup: false,
   onclick: false,
   onfocusout: false,

   //validation rules
   rules: {

       ...

   },

   //validation messages
   messages: {
   
       ...

   },

   //submit handler
   submitHandler: function(form)
   {

       ...

   }

})

Other $.validate() options

messages: {},
groups: {},
rules: {},
errorClass: "error",
validClass: "valid",
errorElement: "label",
focusInvalid: true,
errorContainer: $( [] ),
errorLabelContainer: $( [] ),
onsubmit: true,
ignore: ":hidden",
ignoreTitle: false,
onfocusin: function(element, event) { ... },
onfocusout: function(element, event) { ... },
onkeyup: function(element, event) { ... },
onclick: function(element, event) { ... },
highlight: function(element, errorClass, validClass) { ... },
unhighlight: function(element, errorClass, validClass) { ... }

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • jc

    this does not work on me

  • Achmed Ded Terrorist

    this must be one of the most incomplete and useless posts I have ever read

  • Idus

    Thanks for the post! Your information was very visual and easy to parse at-a-glance. This helped clarify placement of parameters within the validation call.

  • Anderson Smith

    user_email: {
    required: true,
    email: true,
    remote: {
    url: baseUrl+”/sign/check-signup.php”,
    type: “post”,
    // cache: false,
    // dataType: “json”,
    data: {
    user_email: function() {
    //console.clear();
    return $(“#user_email”).val();
    }
    },
    success: function(data){
    // console.clear();

    if(data == 1){
    $(“#user_email”).after(‘Email address is already taken.’);
    } else{
    $(“#emailError”).remove();
    }
    },
    error: function(data){
    console.log(data);
    }
    }
    },

    Please tell me what is issue in this code ? When remote is remove then form submit and when remote has then form is not submit.