jQuery Validate plugin - don't evaluate empty fields

Question

I'm using the jQuery Validate plugin and what I'm trying to do should be relatively easy, but I can't get it to work.

I've got an input field that is not a mandatory/required field. If nothing is entered into the field I don't want to run any form of validation on the field. If the form field changes and contains any input I want to validate it against, for example, numbers only, but if the field is blank, remove / don't validate.

I tried doing something like this:

valForm('excessFrm');

var vou = $('input[name="voucher"]');

vou.blur(function(){
  if($(this).val() == ''){
    ( "#voucher" ).rules( "remove" );
  } else {
    ( "#voucher" ).rules( "add", {
        number: true
    });
  }
})

But no matter where I put this in my code I'm getting this error:

Uncaught TypeError: Object #voucher has no method 'rules' 

Even though I'm sure the validate() object has been initiated, the valForm() function calls the validation object and setup all my default rules etc.

Can anybody offer some words of wisdom please?

Answer 1

Quote OP:

I've got an input field that is not a mandatory/required field. If nothing is entered into the field I don't want to run any form of validation on the field. If the form field changes and contains any input I want to validate it against, for example, numbers only, but if the field is blank, remove / don't validate.

You've just described the expected normal behavior of any form validation software, including the jQuery Validate plugin.

You don't need a custom blur event handler because the plugin performs validation triggered by the onfocusout option which is enabled by default.

You don't need to add & remove rules using the rules() method because the plugin, by default, will not evaluate the rules on an empty field. (Of course, the single exception is the required rule, which by definition, only applies to an empty field.)

Delete your code and start over with something more like this...

HTML:

<form id="myform">  
     <input type="text" name="voucher" />
     <input type="submit" />
</form> 

jQuery:

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            voucher: {
                number: true
            }
        }
    });

});

Working DEMO: http://jsfiddle.net/HBfJB/

As you can see in the demo, leaving the field blank allows submission, however, when any characters are entered, the validation rule is evaluated.

Answer 2

I had the same requirement as you... So I used this code (got from isNullorWhitespace in javascript)

function isNullOrWhitespace(input) {
    if (typeof input === 'undefined' || input == null) 
        return true;
    return input.replace(/\s/g, '').length < 1;
}

Then, before using JQuery.Validator configure it:

 jQuery.validator.addMethod("validateNullOrWhiteSpace", function (value, element) {        
    return !isNullOrWhitespace(value);
 }, "Blanks are not allowed!");

After this, just add it up your custom rule (in my case I use addClassRules):

  jQuery.validator.addClassRules("emailUserClass", {            
        email: true,
        validateNullOrWhiteSpace: true
    });

Hope it helps

*For any further info visit http://jqueryvalidation.org/jQuery.validator.addMethod/