
Evaluates an entire form against all the validators that are set up, firing events when inputs fail validation.
new Form.Validator(form[, options]);
var myFormValidator = new Form.Validator($('myForm'), { onFormValidate: myFormHandler, useTitles: true });
The preferred method for passing in validator properties (like the minimum length) is to append the value after the name. This value will be passed through JSON.decode so it can be a number, string, array representation, etc.
// the minimum length the user can supply is the integer 10 <input data-validators="minLength:10" /> // there isn't a default validator like this, but if there were, // it would be passed the *string* 'foo' <input data-validators="cannotContain:'foo'"/>
You can use a property called "data-validator-properties" and pass in JSON values if you like.
<input class="minLength maxLength" data-validator-properties="{minLength: 10, maxLength:20}"/>
You can pass properties that are not a validator's name. All properties will be passed to the validator:
// here we validate the date, but the validator gets access to // the property defined for dateFormat (and any other property defined this way) <input data-validators="validate-date dateFormat:'%d/%m/%Y'" />
Note that the property must be decodable by JSON.decode, so strings must have quotes, for example (single quotes are fine).
Note that string values that require spaces should use URL encoding, as spaces are the delimiters for validator names. Then your validator should url decode them from the data-validator-properites object when it uses them. Alternately, you can store this data directly on the input:
$('myinput').set('validatorProps', { someValue: "I'm a string with spaces!" });
Each InputValidator can also be used to generate warnings. Warnings still show error messages, but do not prevent the form from being submitted. Warnings can be applied in two ways:
Form.Validator comes with numerous built-in validators (see below), each of which presents a validation error to the user when they trip it. These can be altered for different languages. See Locale
If you do translate these, please send them back to us so we can add them to our repository.
Removes all the error messages from the form.
myFormValidator.reset();
Validates all the inputs in the form; note that this function is called on submit unless you specify otherwise in the options.
myFormValidator.validate(event);
Validates the value of a field against all the validators.
myFormValidator.validateField(field[, force]);
Tests a field against a specific validator.
myFormValidator.test(name, field, warn);
Removes all the error messages for a specific field.
myFormValidator.resetField(field);
Stops validating the form; when form is submitted, even if there are values that do not pass validation the submission will proceed.
myFormValidator.stop();
Resumes validating the form.
myFormValidator.start();
Stops validating a particular field.
myFormValidator.ignoreField(field[, warn]);
Resumes validating a particular field
myFormValidator.enforceField(field);
Form.Validator.js includes many default validators. You can add your own using these methods.
Adds a new form validator to the global Form.Validator object or to an instance (see notes).
//add a form validator to my instance myFormValidator.add(name, options); //add a form validator to all future instances (globally) Form.Validator.add(name, options);
This method is a property of every instance of Form.Validator as well as the Form.Validator object itself. That is to say that you can add validators to the Form.Validator object or to an instance of it. Adding validators to an instance of Form.Validator will make those validators apply only to that instance, while adding them to the Class will make them available to all instances.
//add a validator for ALL instances Form.Validator.add('isEmpty', { errorMsg: 'This field is required', test: function(element){ if (element.value.length == 0) return false; else return true; } }); //this validator is only available to this single instance var myFormValidatorInstance = new Form.Validator('myform'); myFormValidatorInstance.add('doesNotContainTheLetterQ', { errorMsg: 'This field cannot contain the letter Q!', test: function(field){ return !field.get('value').test(/q/,'i'); } }); //Extend Form.Validator, add a global validator for all instances of that version var NewFormValidator = Form.Validator.extend({ //...some code }); NewFormValidator.add('doesNotContainTheLetterZ', { errorMsg: 'This field cannot contain the letter Z!', test: function(field){ return !field.get('value').test(/z/,'i'); } });
An array of InputValidator configurations (see Form.Validator:add above).
//add several input validators to all instances of Form.Validator Form.Validator.addAllThese(validators); //add several input validators to a specific instance of Form.Validator myFormValidator.addAllThese(validators);
Form.Validator.addAllThese([ ['name1', {errorMsg: ..., test: ...}], ['name2', {errorMsg: ..., test: ...}], ['name3', {errorMsg: ..., test: ...}], // etc.. ]);
Sets and gets default options for the Form.Validator instance of an Element.
el.set('validator'[, options]);
el.set('validator', {serial: true}); el.validate();
el.get('validator', [options]);
el.get('validator', {serial: true, evaluateFieldsOnBlur: false}).reset();
Calls the validate method on the specified element.
myForm.validate([options]);
Here are the validators that are included in this library. Add the name to any input's data-validators property and then create a new Form.Validator and these will automatically be applied. See Form.Validator:add on how to add your own.
Evaluates if the input is empty; this is a utility validator, see Form.Validator.required.
Displays an error if the field is empty.
Error Msg: "This field is required"
Displays a message if the input value is not the exact supplied length.
Error Msg: "Please enter [defined length] characters (you entered [input length] characters)"
You must add this name AND properties for it to your input.
<input type="text" name="username" class="length:10" id="username" />
Displays a message if the input value is less than the supplied length.
Error Msg: "Please enter at least [defined minLength] characters (you entered [input length] characters)"
You must add this name AND properties for it to your input.
<input type="text" name="username" class="minLength:10" id="username" />
Displays a message if the input value is less than the supplied length.
Error Msg: "Please enter no more than [defined maxLength] characters (you entered [input length] characters)"
You must add this name AND properties for it to your input.
<input type="text" name="username" class="maxLength:10" id="username" />
Validates that the entry is a number.
Error Msg: 'Please enter only numeric values in this field ("1" or "1.1" or "-1" or "-1.1").'
Validates that the entry is an integer.
Error Msg: "Please enter an integer in this field. Numbers with decimals (e.g. 1.25) are not permitted."
Validates that the entry contains only numbers but allows punctuation and spaces (for example, a phone number)
Error Msg: "Please use numbers only in this field. Please avoid spaces or other characters such as dots or commas."
Validates that the entry contains only letters
Error Msg - "Please use letters only (a-z) in this field."
Validates that the entry is letters and numbers only
Error Msg: "Please use only letters (a-z) or numbers (0-9) only in this field. No spaces or other characters are allowed."
Validates that the entry parses to a date. The dateFormat property can be set to format the date after the field is validated.
If you want to validate a custom format, you should use Date.defineParser or use Date Locale. If Date is not included in your build, only the dd/mm/yy
or dd/mm/yyyy
formats are accepted.
Error Msg: "Please enter a valid date (such as 12/31/1999)"
<input data-validators="validate-date dateFormat:'%d/%m/%Y'" />
Validates that the entry is a valid email address.
Error Msg: "Please enter a valid email address. For example 'fred@domain.com'."
Validates that the entry is a valid url
Error Msg: "Please enter a valid URL."
Validates that the entry matches any of the following:
Error Msg: "Please enter a valid $ amount. For example $100.00 ."
Validates that all the entries within the same node are not empty.
Error Msg: "Please enter something for at least one of the above options."
<div> <input ..../> <input ..../> <input .... data-validators="validate-one-required"/> </div>
This class contains functionality to test a field for various criteria and also to generate an error message when that test fails.
new InputValidator(name, options);
The errorMsg option can be any of the following:
The test option is a function that will be passed the field being evaluated and any properties defined for the validator as a name (see example below); this function must return true or false.
//html code <input type="text" name="firstName" data-validators="required" id="firstName"/> //simple validator var isEmpty = new InputValidator('required', { errorMsg: 'This field is required.', test: function(field){ return ((field.get('value') == null) || (field.get('value').length == 0)); } }); isEmpty.test($("firstName")); //true if empty isEmpty.getError($("firstName")) //returns "This field is required." //two complex validators <input type="text" name="username" data-validators="minLength:10 maxLength:100" id="username"/> var minLength = new InputValidator ('minLength', { errorMsg: function(element, props){ //props is {minLength:10, maxLength:100} if ($type(props.minLength)) return 'Please enter at least ' + props.minLength + ' characters' + ' (you entered ' + element.value.length + ' characters).'; else return ''; }, test: function(element, props){ //if the value is >= than the minLength value, element passes test return (element.value.length >= $pick(props.minLength, 0)); } }); minLength.test($('username')); var maxLength = new InputValidator ('maxLength', { errorMsg: function(element, props){ //props is {minLength:10, maxLength:100} if ($type(props.maxLength)) return 'Please enter no more than ' + props.maxLength + ' characters' + '(you entered ' + element.value.length + ' characters).'; else return ''; }, test: function(element, props){ //if the value is <= than the maxLength value, element passes test return (element.value.length <= $pick(props.maxLength, 10000)); } });
Tests a field against the validator's rule(s).
myInputValidator.test(field);
Retrieves the error message for the validator.
© Linux.ria.ua, 2008-2024 |