Sandbox: JavaScript

Automatically validates inputs as the user types.

Plugin dependency

Note: Be sure to include thanx-components/form-validator.less so that error states are styled correctly.

Basic Usage

Validates that a form's inputs are correct. Fill out the form as described and submit it. Errors should be displayed as you enter invalid values.

<form id="foo" data-behavior="FormValidator" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-5 control-label">this cannot be empty</label>
    <div class="col-lg-5"><input name="a" data-validators="required" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be an integer (-1,0,1,2,3, etc)</label>
    <div class="col-lg-5"><input name="b" data-validators="required validate-integer" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be numeric (0, 1.3, -5.2, 10, etc) </label>
    <div class="col-lg-5"><input name="c" data-validators="required validate-numeric" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be between 3 and 6 characters long</label>
    <div class="col-lg-5"><input name="d" data-validators="required minLength:3 maxLength:6" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be numbers only, but punctuation and spaces are ok</label>
    <div class="col-lg-5"><input name="e" data-validators="required validate-digits" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be only letters</label>
    <div class="col-lg-5"><input name="f" data-validators="required validate-alpha" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be letters and/or numbers</label>
    <div class="col-lg-5"><input name="g" data-validators="required validate-alphanum" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be a date; try lots of combos</label>
    <div class="col-lg-5"><input name="h" data-validators="required validate-date" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be an email address</label>
    <div class="col-lg-5"><input name="i" data-validators="required validate-email" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be a url</label>
    <div class="col-lg-5"><input name="j" data-validators="required validate-url" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">this must be a dollar currency ($1.00, $1,000.00, $100)</label>
    <div class="col-lg-5"><input name="k" data-validators="required validate-currency-dollar" class="form-control"></div>
  </div>
  <div class="form-group">
    <label class="col-lg-5 control-label">You must select a time after at least 1 day ago, and before at least 1 day from now</label>
    <div class="col-lg-5"><input name="m" type="datetime-local"
      value="2018-12-15T11:33:00"
      data-validators="required validate-time-before validate-time-after offsetAfter:-86400 offsetBefore:86400"
      class="form-control"></div>
  </div>

  <div class="form-group">
    <label class="col-lg-5 control-label">this one of these must be checked</label>
    <div class="col-lg-5">
      <label class="checkbox-inline">
        <input type="checkbox" value="1"> 1
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" value="2"> 2
      </label>
      <label class="checkbox-inline">
        <input type="checkbox" value="3" data-validators="validate-one-required"> 3
      </label>
      <div class="help-block advice"><!-- This div, empty, is where the validation message will be
        placed so as not to break the flow of the inputs above --></div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-offset-5 col-lg-5">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

Related Documentation

Note: Not all links in these work.

Behavior Filter: Behavior.FormValidator

Creates an instance of Form.Validator.Inline for an element using the FormValidator data filter.

Example

<form data-behavior="FormValidator" data-formrequest-options="
  'stopOnFailure': false,
  'serial': false
  //etc
">
    <input name="foo" type="text" data-validators="required"/>
    <input type="submit"/>
</form>

Options

  • stopOnFailure - (boolean; defaults to true) If true (the default) the form will not submit if there is a validation error.
  • useTitles - (boolean; defaults to true) Use the titles of inputs for the error message; overrides the messages defined in the InputValidators.
  • evaluateOnSubmit - (boolean; defaults to true) Whether to validate the form when the user submits it.
  • evaluateFieldsOnBlur - (boolean; defaults to true) Whether to validate the fields when the blur event fires.
  • evaluateFieldsOnChange - (boolean; defaults to true) Whether to validate the fields when the change event fires
  • serial - (boolean; defaults to true) Whether to validate other fields if one field fails validation unless the other fields' contents actually change (instead of onblur).
  • ignoreHidden - (boolean; defaults to true) If true (the default), all fields that are not visible to the user (who are display:none or whose parents are display:none) are not validated.
  • ignoreDisabled - (boolean; defaults to true) If true (the default), all disabled fields are not validated.
  • scrollToErrorsOnSubmit - (boolean; defaults to true) If true (the default), when the user submits the form the window (or overflown parent) will scroll up to that element so it is in view. Will use Fx.Scroll if it's available, otherwise it will jump to the element.
  • scrollToErrorsOnBlur - (boolean; defaults to false) If true blur events will be attached to inputs, triggering a scroll to relevant errored field.
  • scrollToErrorsOnChange - (boolean; defaults to false) If true change events will be attached to inputs, triggering a scroll to the relevant errored field.

Class: Form.Validator

Evaluates an entire form against all the validators that are set up, firing events when inputs fail validation.

Demo

Implements

Form.Validator Method: Constructor

Syntax

new Form.Validator(form[, options]);

Arguments

  1. form - (mixed) A string of the id for an Element or an Element reference of the form to evaluate
  2. options - (object) a key/value set of options

Options

  • stopOnFailure - (boolean) if true (the default) the form will not submit if there is a validation error.
  • fieldSelectors - (string) the selector for fields to include in the validation; defaults to "input, select, textarea"; these are applied only to the children of the form
  • useTitles - (boolean) use the titles of inputs for the error message; overrides the messages defined in the InputValidators (see InputValidator); defaults to false
  • evaluateOnSubmit - (boolean) whether to validate the form when the user submits it; defaults to true
  • evaluateFieldsOnBlur - (boolean) whether to validate the fields when the blur event fires; defaults to true
  • evaluateFieldsOnChange - (boolean) whether to validate the fields when the change event fires; defaults to true
  • serial - (boolean) whether to validate other fields if one field fails validation unless the other fields' contents actually change (instead of onblur); defaults to true
  • ignoreHidden - (boolean) if true (the default), all fields that are not visible to the user (who are display:none or whose parents are display:none) are not validated.
  • ignoreDisabled - (boolean) if true (the default), all disabled fields are not validated.
  • warningPrefix - (string) prefix to be added to every warning; defaults to "Warning: "
  • errorPrefix - (string) prefix to be added to every error; defaults to "Error: "

Events

  • formValidate - (function) callback to execute when the form validation completes; this function is passed three arguments: a boolean (true if the form passed validation); the form element; and the onsubmit event object if there was one (otherwise, passed undefined)
  • elementValidate - (function) callback to execute when an input element is tested. This function is passed four arguments: a boolean (true if the form passed validation), the input element that was tested, the name of the validator that failed, and a boolean that denotes if it was configured as a warning or not (true means warn). Note that this callback is executed for each validator.
  • elementPass - (function) callback to execute when an input element passes all of it's validators. Passed one argument: the element that was tested.
  • elementFail - (function) callback to execute when an element fails one or more of its validators. Passed two arguments: the element that was tested and an array of all the validator names that failed.

Example

var myFormValidator = new Form.Validator($('myForm'), {
    onFormValidate: myFormHandler,
    useTitles: true
});

Notes

  • Form.Validator must be configured with InputValidator objects (see below for details as well as a list of built-in validators). Each InputValidator will be applied to any input that includes its name in the data-validators property within the elements of the form that match the fieldSelectors option.
  • 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!"
    });
    

Using Warnings

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:

  • warn per validator - You can specify any validator as a warning by prefixing "warn-" to the name. So, for example, if you have a validator called "validate-numbers" you can add the name "warn-validate-numbers" and a warning will be offered rather than an error. The validator will not prevent the form from submitting.
  • warn per field - You can also ignore all the validators for a given field. You can add the name "warnOnly" to set all it's validators to present warnings only or you can add the class "ignoreValidation" to the field to turn all the validators off. Note that the Form.Validator class has methods do this for you: see Form.Validator:ignoreField and Form.Validator:enforceField.

Internationalization

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.

Form.Validator Method: enable

Enables the form validator, attaching events for submit, blur, and change per the options configuration. This method is invoked on startup.

Syntax

myFormValidator.enable();

Returns

Form.Validator Method: disable

Disables the form validator, removing events for submit, blur, and change per the options configuration.

Syntax

myFormValidator.disable();

Returns

Form.Validator Method: reset

Removes all the error messages from the form.

Syntax

myFormValidator.reset();

Returns

Form.Validator Method: validate

Validates all the inputs in the form; note that this function is called on submit unless you specify otherwise in the options.

Syntax

myFormValidator.validate(event);

Arguments

  1. event - (event, optional) the submit event

Returns

  • (boolean) true if all the form inputs pass validation

Form.Validator Method: validateField

Validates the value of a field against all the validators.

Syntax

myFormValidator.validateField(field[, force]);

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the input element to evaluate
  2. force - (boolean, optional) whether to force validation; if false (or undefined) and options.serial == true, the validation does not occur

Returns

  • (boolean) true if the form input passes validation

Form.Validator Method: test

Tests a field against a specific validator.

Syntax

myFormValidator.test(name, field, warn);

Arguments

  1. name - (string) the name associated with the validator
  2. field - (mixed) A string of the id for an Element or an Element reference of the input element to test against the name/validator
  3. warn - (boolean, optional) whether test will add a warning advice message if the validator fails; if set to true test will always return valid regardless of the input.

Returns

  • (boolean) true if the form input passes the specified validation

Form.Validator Method: resetField

Removes all the error messages for a specific field.

Syntax

myFormValidator.resetField(field);

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the input element to reset

Returns

Form.Validator Method: stop

Stops validating the form; when form is submitted, even if there are values that do not pass validation the submission will proceed.

Syntax

myFormValidator.stop();

Returns

Form.Validator Method: start

Resumes validating the form.

Syntax

myFormValidator.start();

Returns

Form.Validator Method: ignoreField

Stops validating a particular field.

Syntax

myFormValidator.ignoreField(field[, warn]);

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the input element to ignore
  2. warn - (boolean, optional) whether to produce a warning if the validator does not pass; defaults to false

Returns

Form.Validator Method: enforceField

Resumes validating a particular field

Syntax

myFormValidator.enforceField(field);

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the input element to resume validating

Returns

Adding Custom Validators

Form.Validator.js includes many default validators. You can add your own using these methods.

Form.Validator Method: add

Adds a new form validator to the global Form.Validator object or to an instance (see notes).

Syntax

//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);

Arguments

  1. name - (string) the name associated with the validator
  2. options - (object) the InputValidator options (errorMsg and test)

Notes

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.

Examples

//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');
    }
});

Form.Validator: addAllThese

An array of InputValidator configurations (see Form.Validator:add above).

Syntax

//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);

Arguments

  1. validators - (array) an array of validators (see example below and Form.Validator:add).

Example

Form.Validator.addAllThese([
    ['name1', {errorMsg: ..., test: ...}],
    ['name2', {errorMsg: ..., test: ...}],
    ['name3', {errorMsg: ..., test: ...}],
    // etc..
]);

Type: Element

Element Property: validator

Sets and gets default options for the Form.Validator instance of an Element.

Setter

Syntax

el.set('validator'[, options]);

Arguments

  • options - (object) the Form.Validator options.

Returns

  • (element) This Element.

Examples

el.set('validator', {serial: true});
el.validate();

Getter

Syntax

el.get('validator', [options]);

Arguments

  1. property - (string) the Form.Validator property argument.
  2. options - (object) the Form.Validator options.

Returns

  • (object) The Element's internal Form.Validator instance.

Examples

el.get('validator', {serial: true, evaluateFieldsOnBlur: false}).reset();

Notes

  • When options are passed to either the setter or the getter, the instance will NOT be recreated. Its existing instance will have its options set with the new values.
  • As with the other Element shortcuts, the difference between a setter and a getter is that the getter returns the instance, while the setter returns the element (for chaining and initialization).

Element method: validate

Calls the validate method on the specified element.

Syntax

myForm.validate([options]);

Arguments

  1. options - (object; optional) options to apply to the internal element's of Form.Validator.

Returns

  • (boolean) Returns true if the form passes validation, else false if there were errors.

Included InputValidators:

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.

Validator: IsEmpty

Evaluates if the input is empty; this is a utility validator, see Form.Validator.required.

Validator: required

Displays an error if the field is empty.

Error Msg: "This field is required"

Validator: length

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)"

Note

You must add this name AND properties for it to your input.

Example

<input type="text" name="username" class="length:10" id="username" />

Validator: minLength

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)"

Note

You must add this name AND properties for it to your input.

Example

<input type="text" name="username" class="minLength:10" id="username" />

Validator: maxLength

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)"

Note

You must add this name AND properties for it to your input.

Example

<input type="text" name="username" class="maxLength:10" id="username" />

Validator: validate-numeric

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").'

Validator: validate-integer

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."

Validator: validate-digits

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."

Validator: validate-alpha

Validates that the entry contains only letters

Error Msg - "Please use letters only (a-z) in this field."

Validator: validate-alphanum

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."

Validator: validate-date

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)"

Example:

<input data-validators="validate-date dateFormat:'%d/%m/%Y'" />

Validate: validate-email

Validates that the entry is a valid email address.

Error Msg: "Please enter a valid email address. For example 'fred@domain.com'."

Validate: validate-url

Validates that the entry is a valid url

Error Msg: "Please enter a valid URL."

Validator: validate-currency-dollar

Validates that the entry matches any of the following:

  • [$]1[##][,###]+[.##]
  • [$]1###+[.##]
  • [$]0.##
  • [$].##

Error Msg: "Please enter a valid $ amount. For example $100.00 ."

Validator: validate-one-required

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."

Note

  • This validator will get the parent element for the input and then check all its children. To use this validator, enclose all the inputs you want to group in another element (doesn't matter which); you only need apply this class to one of the elements.

Example

<div>
    <input ..../>
    <input ..../>
    <input .... data-validators="validate-one-required"/>
</div>

Class: InputValidator

This class contains functionality to test a field for various criteria and also to generate an error message when that test fails.

Authors

Implements

Syntax

new InputValidator(name, options);

Arguments

  1. name - (string) a name that this field will be related to (see example below)
  2. options - (object) a key/value set of options

Options

  • errorMsg - (mixed) a message to display; see section below for details.
  • test - (function) a function that returns true or false

Option: errorMsg

The errorMsg option can be any of the following:

  • string - the message to display if the field fails validation
  • boolean:false - do not display a message at all
  • function - a function to evaluate that returns either a string or false. This function will be passed two parameters: the field being evaluated and any properties defined for the validator as a name (see examples below)

Option: test

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.

Examples

//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));
    }
});

InputValidator Method: test

Tests a field against the validator's rule(s).

Syntax

myInputValidator.test(field);

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the form input to test

Returns

  • (boolean) - true if the field passes the test; false if it does not pass the test

InputValidator Method: getError

Retrieves the error message for the validator.

Arguments

  1. field - (mixed) A string of the id for an Element or an Element reference of the form input to test

Returns

  • (mixed) - The error message (string) or boolean false if no message is meant to be returned.

Additional InputValidators:

Tutorial/Demo

Here are the validators that are included in this libary. Add the name to any input's data-validators property and then create a new Form.Validator and these will automatically be applied.

Validator: validate-nospace

Enforces that there are no spaces in the input value.

Validator: validate-enforce-oncheck

When added to a checkbox/radio button, and a list (array) of element id's can be passed in (toEnforce) to enforce validation on those fields.

Example

<input type="checkbox" class="validate-enforce-oncheck toEnforce:['name','email','phone']"/>
//when checked, the inputs with the ids 'name', 'email', and 'phone' will also be validated on change/submit

<input type="checkbox" class="validate-enforce-oncheck enforceChildrenOf:'someParent'"/>
//when checked, all inputs inside $('someParent') will be validated on change/submit

Validator: validate-ignore-oncheck

When added to a checkbox/radio button, and a list (array) of element id's can be passed in (toIgnore) in the validatorProps to ignore validation on those fields.

Example

<input type="checkbox" class="validate-ignore-oncheck toIgnore:['name','email','phone']"/>
//when checked, the inputs with the ids 'name', 'email', and 'phone' will NOT be validated on change/submit

<input type="checkbox" class="validate-ignore-oncheck ignoreChildrenOf:'someParent'"/>
//when checked, all inputs inside $('someParent') will NOT be validated on change/submit

Validator: validate-toggle-oncheck

When the input is checked or un-checked, the inputs defined will be toggled from ignore (if the input is un-checked) to enforce (if it is checked).

Example

<input type="checkbox" class="validate-toggle-oncheck toToggle:['name','email','phone']"/>
//when checked, the inputs with the ids 'name', 'email', and 'phone' will be validated on change/submit
//when unchecked, they will be ignored

<input type="checkbox" class="validate-toggle-oncheck toToggleChildrenOf:'someParent'"/>
//when checked, all inputs inside $('someParent') will be validated on change/submit
//when unchecked, they will be ignored

Validator: validate-required-check

Forces the user to check a checkbox (thing agreeing to terms and conditions).

Validator: validate-reqchk-bynode

At least one checkbox/radio is required to be checked in this node. nodeId needs to be passed to the validatorProps.

Example

<input type="checkbox" class="validate-reqchk-bynode nodeId:'someParent'"/>

//you can also specify a selector for the parent
<input type="checkbox" class="validate-reqchk-bynode nodeId:'someParent' selector:'input.foo[type=checkbox]'"/>

Validator: validate-reqchk-byname

At least one checkbox/radio is required to be checked in this name group. You can specify an optional label that completes the error message: "Please select a label." - it defaults to either "checkbox" or "radio" - the type of the input. By default it uses the name of the input to find all inputs with the same name but you can specify the optional validatorProps name groupName if you prefer.

Example

<input type="checkbox" class="validate-reqchk-byname label: 'flavor'" name="favoriteFlavor"/>

Validator: validate-after-date

Takes in the id of a start field id and compares it to make sure the given value is later than or equal to the start date. If no other input is specified it uses the current time. The other validatorProps option is afterLabel which completes the sentence "The date should be the same or after label." If you do not specify an afterLabel, either "the current time" or "the start date" is used (the latter is used if afterElement is specified);

Example

<input type="text" name="endDate" class="validate-after-date afterElement:'startDate'"/>
//if you don't include afterElement the current time is used

Validator: validate-before-date

Takes in the id of a end field id and compares it to make sure the given value is before or equal to the end date. If no other input is specified it uses the current time. The other validatorProps option is beforeLabel which completes the sentence "The date should be the same or before label." If you do not specify an beforeLabel, either "the current time" or "the end date" is used (the latter is used if beforeElement is specified);

Example

<input type="text" name="startDate" class="validate-before-date beforeElement:'endDate'"/>
//if you don't include beforeElement the current time is used

Validator: validate-custom-required

Required field with an option to define what an empty value is. For example, if you have a list months in a drop down list and first option is "select month" has a value of 'null', you can define a custom-required with emptyValue='null', so it's treated as an empty value.

Example

<select class="validate-custom-required emptyValue:'null'">
    <option value="null">Select One</option>
    ...etc.
</select>

Validator: validate-same-month

Takes another input's id and makes sure both ranges are within the same month. Pass in the sameMonthAs value in the validatorProps as the id of the form to compare to.

Example

<input class="validate-same-month sameMonthAs:'startDate'"/>

Validator: validate-match

Takes in an id of a field and matches them together. Can also take matchName that is used in the error message (i.e.: password confirmations). matchName defaults to the name of the other field, which isn't always very helpful, so you should specify it.

<input type="input" class="validate-match matchInput:'password' matchName:'password'"/>
//error msg: This field needs to match the password field.

Validator: validate-cc-num

Validates that an input is a valid credit card number (Visa, MasterCard, Amex, Discover). Note that it replaces all non-numeric characters to the value (but not to the input's displayed value) before it applies validation, so the user could put in dashes, letters, punctuation, whatever, but if the numbers in the value without those things makes a valid CC number, it will pass.

<input type="input" class="validate-cc-num"/>

Form.Validator.Extras Language Localization

Form.Validator.Extras.js includes the following key/values for localization.

  • noSpace - (string) 'There can be no spaces in this input.'
  • reqChkByNode - (string) 'No items are selected.'
  • requiredChk - (string) 'This field is required.'
  • reqChkByName - (string) 'Please select a {label}.'
  • match - (string) 'This field needs to match the {matchName} field' where matchName is the name of another field
  • startDate - (string) 'the start date'
  • endDate - (string) 'the end date'
  • currentDate - (string) 'the current date'
  • afterDate - (string) 'The date should be the same or after {label}.' where label is the name of another date field
  • beforeDate - (string) 'The date should be the same or before {label}.' where label is the name of another date field
  • startMonth - (string) 'Please select a start month'
  • sameMonth - (string) 'These two dates must be in the same month - you must change one or the other.'
  • creditcard - (string) 'The credit card number entered is invalid. Please check the number and try again. {length} digits entered.' where length is the number of integers entered.