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?

Are you sure you are using validate plugin right? See this sample source http://www.codeproject.com/Articles/213138/An-Example-to-Use-jQuery-Validation-Plugin — Akki619, Jul 31 '13 at 13:08
Yeah. The other fields on the form validate ok. I'm just thinking maybe the validate isn't instantiating before the .blur function is applied. Therefore the validat object doesn't exist. Do you know if the validate plugin had a callback at all? — Strontium_99, Jul 31 '13 at 13:13
no idea buddy.... can u try with onfocusout event. See fiddle here http://jsfiddle.net/tigerfinch/J8DvX/8/ — Akki619, Jul 31 '13 at 13:19
I might have another way around it. Thanks for the feedback. — Strontium_99, Jul 31 '13 at 13:21
That can't be all the code for a complete/concise working example. Please show the rest of your code. Where is your HTML markup? Where is `.validate()`? — Sparky, Jul 31 '13 at 17:25

Sparky · Accepted Answer · 2013-07-31T19:52:25.197

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.

score 1 · Answer 2 · edited May 23 '17 at 10:34

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/

jQuery Validate plugin - don't evaluate empty fields

2 Answers2

Linked