Mori Mori - 5 months ago 50
jQuery Question

What does this.optional(element) do when adding a jQuery validation method?

Please see the documentation:

http://docs.jquery.com/Plugins/Validation/Validator/addMethod

I wonder what

this.optional(element)
does. I created two forms to test:

Form1 and Form2 -- one with
this.optional(element)
and the other without it. Theoretically speaking and according to a couple of comments on this answer by Andrew Whitaker:


all
this.optional
does is say "if the field is optional, return true
if it is blank"


and


The
this.optional
check is basically checking to see if the field is
blank or not before evaluating whether or not it meets the rule.


But in action I see no difference in how Form1 and Form2 work. Please help me understand the difference in action.

Answer

OK... so in your examples, the field is never blank in either form. Either it has a placeholder value, or an attempt at an email address. The whole point of this.optional(element) is to immediately return true if the element is blank AND it is not required.

So if you had these two methods:

jQuery.validator.addMethod("BOB", function (value, element) {
    return this.optional(element) || 
        element.value === 'BOB';
}, 'You did not enter BOB');

jQuery.validator.addMethod("mustbeBOB", function (value, element) {
    return element.value === 'BOB';
}, 'You did not enter BOB');

Adding a class of BOB required would be the same as entering a class of mustbeBOB. Compare that to having a class of BOB which would allow for a blank or "BOB", vs a class of mustbeBOB which will only pass validation with a value of BOB, blank would fail. Does that make more sense?