jQuery validation validate only on form submit

Sam Deering
Tweet

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) { ... }

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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.