checkValidity([options]) Returns: jQuery

Called with no arguments, checkValidity calls its init method. The init method binds two classes of events: events which should trigger validation and the events triggered by the validation process itself and the reset event. By default, the events triggering validation are 'change' and 'submit'. The validation process triggers an 'invalid' or 'valid' event depending on the result of the validation. By default, the event handlers for the 'invalid', 'valid', and 'reset' events set class names on the input element and its labels and populate any element in the label classed 'error' with the validation message.

Example: calling with default arguments.

<style> input.invalid, textarea.invalid { background-image: url("images/cross.png"); } input.valid, textarea.valid { background-image: url(images/accept.png); } input, textarea { background-position: right top; background-repeat: no-repeat; } label, input, textarea {display:block} label {margin-bottom: 5px;} .error {color: red} </style> <form> <label> field text <span class="error"></span> <input type="text" required="true" value=""/> </label> <label> number <span class="error"></span> <input type="number" required="true"/> </label> <label> url <span class="error"></span> <input type="url" required="true"/> </label> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script src="checkValidity.js"></script> <script> $(document).ready(function(){ $('form').checkValidity({ validateEvents: 'submit', reset: function(){ $('textarea, input', this).reset(); } }); $('input:not([type=submit])').checkValidity({validateEvents: 'change'}); }); </script>

You can overide the default behavior by calling checkValidity with your own options. Note how the input element's class is not changed if the default handlers are overridden in the example below.

Example: Calling with custom event handlers.

<style> input.invalid, textarea.invalid { background-image: url("images/cross.png"); } input.valid, textarea.valid { background-image: url(images/accept.png); } input, textarea { background-position: right top; background-repeat: no-repeat; } label, input, textarea {display:block} label {margin-bottom: 5px;} .error {color: red} </style> <form> <label> field text <span class="error"></span> <input type="text" required="true" value=""/> </label> <label> number <span class="error"></span> <input type="number" required="true"/> </label> <label> url <span class="error"></span> <input type="url" required="true"/> </label> <input type="submit" value="submit"> <input type="reset" value="reset"> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script> <script src="checkValidity.js"></script> <script> $(document).ready(function(){ function report(el, str){ var nodeName = el.nodeName, type = nodeName == 'INPUT'? el.getAttribute('type'): ''; alert(nodeName + (type? '['+type+']': '') + ' ' + str); }; var opts = { reset: function(){report(this, 'reset'); }, valid: function(){report(this, 'valid'); return false; }, invalid: function(){report(this, 'invalid'); return false; }, validateEvents: 'submit' }; $('form, :input').checkValidity(opts); }); </script>

options

CheckValidity accepts the following options.

live: boolean

If this is true, events will be attached using .live. Default is true.

validateEvents: string

Defines which events will trigger validity checks. Default is 'change submit'.

resetEvents: string

Defines which events will trigger validity checks. Default is 'reset'.

valid: function

Specifies which function will be called on valid events. By default, the default all the validity event handlers (for valid, invalid, and reset) set classes on the element and its labels while removing non-corresponding classes. Also, they set the html of any elements classed 'error' in the label with the validation message.

invalid, reset: functions

See valid above.

errorClass: string

Specifies which class will receive the validation message on validation failures. See valid above. Default is 'error'.

setCustomError: function ( value, el, errorMessage ){ . . . }

After an element is validated, its validity properties are set and setCustomError is called on its value, also passed are the element itself and the errorMessage object. The element's validationMessage is set to the value returned. By default, the customError function concatenates the error strings in the errorMessage object which correspond to the true properties of the element's validity attribute. So, for example, if the element's value is too long and doesn't match the pattern, the validity object will be {tooLong: true, patternMismatch: true, . . . } and the validationMessage will be set to "Too Long. Bad format." by default.

errorMessage: generally object mapping string to string. But see errorMessage.typeMismatch.

ErrorMessage maps the keys of the validity object to error messages. By default, errorMessage =

{ 
valueMissing: "Required.", 
patternMismatch: 'Bad format.', 
rangeOverflow: 'Too big.', 
rangeUnderflow: 'Too small.', 
stepMismatch: 'Step mismatch.', 
tooLong: 'Too long.', 
tooShort: 'Too short.', 
typeMismatch: { . . . }
}

errorMessage.typeMismatch: object mapping string to string.

errorMessage.typeMismatch maps an element's type to an error message. By default errormessage.typeMismatch =

{ 
default: 'Type mismatch.', 
email: 'Not a recognized email.', 
url: 'Not a recognized url.', 
number: 'Not a recognized number.', 
date: 'Not a recognized date.', 
time: 'Not a recognized time.', 
datetime: 'Not a recognized datetime.', 
datetimelocal: 'Not a recognized local datetime.', 
week: 'Not a recognized week.', 
month: 'Not a recognized month.', 
visa: 'Not a valid Visa number.', 
mastercard: 'Not a valid Mastercard number.', 
creditcard: 'Not a valid credit card number.' 
}

typeCheck: object mapping string to function(valueString){ . . .}

TypeCheck holds the functions used to verify an input element's type. By default, typeCheck =

	    default: function (v){return true;},
	    email: function (v){
		var email_regex = . . . 
		return email_regex.test(v);
	    },
	    url: function(v){
		url_regex: . . . 
		return url_regex.test(v);
	    },
	    number: function(x){return !isNaN(x);},
	    date: function(x){return !isNaN(Date.parse(x));},
	    time: Date.setISO8601,
	    datetime: Date.setISO8601,
	    datetimelocal: Date.setISO8601,
	    week: Date.setISO8601,
	    month: Date.setISO8601,
	    creditcard: function (v) {return creditcard(v);}
	    }

(But see the source for the most recent value. This documentation may not be updated.)

toType: object mapping string to function(v) { . . . }

The object toType holds the function used to convert a string to a value. By default, toType =

 {
	    default: function (v){return v;},
	    number: function(x){return parseFloat(x);},
	    date: Date.parse,
	    time: Date.setISO8601,
	    datetime: Date.parse,
	    datetimelocal: Date.parse,
	    week: Date.setISO8601,
	    month: Date.setISO8601
	    }

stepCheck: object mapping string to function(v, min, step, max)

Returns a value which tests true if there is a step error. By default, stepCheck =

{
	    default: function (v, min, step, max){
		step = parseFloat(step);
		return ((min != undefined)? ((min + v) % step == 0): (max != undefined)? ((max - v) % step == 0): v % step == 0)? '': 'Value is out of step.';
	    },
	    number: function (v, min, step, max){
		step = parseFloat(step);
		return (min != undefined)? (((min + v) % step == 0)? '': ('Value needs to be a whole multiple of '+step+' from a minimum of '+min+'.')):
		    (max != undefined)? (((max - v) % step == 0)? '': ('Value needs to be a whole multiple of '+step+' from a maximum of '+max+'.')):
		    (v % step == 0)? '': ('Value needs to be a multiple of '+step+'.');
	    },
	    date: stepCheckDate, 
	    time: stepCheckDate,
	    datetime: stepCheckDate, 
	    datetimelocal: stepCheckDate,
	    week: function (v, min, step, max){
		step = parseFloat(x) * 604800000;
		var base = min!=undefined? min: max!=undefined? max: 1;
		base = base.getTime? base.getTime(): parseFloat(base);
		return (base+v.getTime())%step? 'Value not in correct increment.': '';
	    },
	    month: function (v, min, step, max){
		step = parseFloat(x);
		var base = min!=undefined? min: max!=undefined? max: 0;
		return (base - v).getMonth()%step? 'Value not in correct increment.': '';
	    }
	    }

checkvalidity(methodname[, . . .]) Returns: jQuery

Checkvalidity may be called with a method name. The following method names are available: 'init', 'validate', 'reset', and 'destroy'.

checkvalidity('validate') Returns: jQuery

The validate method validates the elements in the jQuery object. This will result in the triggering of 'valid' or 'invalid' events.

checkvalidity(reset, [handler]) Returns: jQuery

Called without the handler argument, the reset method calls the reset callback on the objects in the jQuery object. Called with a handler, the reset method assigns the reset callback of the elements in the jQuery object.