validateJS

validateJS is a lightweight javascript library that helps to easily setup a variety of client side validations

This library cuts short your coding time to set up all those pesky validations via javascript which cannot be ignored and are essential for any input form. Lets go through all those validations one by one.
With the default settings of this library you really just need to initialize the library to add the various validators to your form elements.
Let us move forward and see what this library can do without wasting any more time.

Lets have a demo...

First Name:

Last Name:

Email Address:

Phone Number:

I agree that the information that I have provided is correct

(hover over the notification icons to see the validation messages)

On to the validations...

Initializing the Library:

To initialize the validateJS library, add the references to jQuery and validateJS scripts, and then create a ValidationManager object in your page load event. Most of the methods can be chained to save typing more code.

var vManager = new ValidationManager()
    .addValidator(["amount"], [{ type: ValidationType.Required, message: "Amount is required." }])
    .initialize();

Always remember to initialize your validation manager object.

Setting up the markup:

Some specific attributes are need to be added to the input fields, apart from that we need to add <div> tag to show the validation notifications.
Here is how this is done:

Input element

<input id ="txtAmount" maxlength="20" validatorName ="amount"/>

Display validator(this has to be near to the target input element)

<div validator = "amount"></div>

Lets have some fun shall we...

Required Field Validation

Syntax:

vManager.addValidator([validatorName], [{ type: ValidationType.Required, message: messageText }])
    .initialize();

Usage:

vManager.addValidator(["name"], [{ type: ValidationType.Required, message: "Please enter your name." }])
    .initialize();

Demo:
Rule : A value is required.

Please Enter Your Name:

Compare Validation

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.Compare
                    , rule: { compareType: compareType, value: value }, message: messageText }])
    .initialize();

Usage:

vManager.addValidator(["salary"]
                    , [{ type: ValidationType.Compare
                    , rule: { compareType: CompareType.LessThanEqual, value: 100 }
                    , message: "Salary should be less than or equal to $100." }])
    .initialize();

Demo:
Rule : Value must be less than or equal to 100.

Enter the Salary You Want:

Range Validation

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.Range, rule: [minValue, maxValue]
                    , message: messageText }])
    .initialize();

Usage:

vManager.addValidator(["salary"]
                    , [type: ValidationType.Range
                    , rule: [1000, 2000]
                    , message: "Salary should be between $1000 and $2000." }])
    .initialize();

Demo:
Rule : Value must be between 1000 and 2000.

Enter the Salary You Want:

Regular Expression Validation

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.RegularExpression, rule: regularExpression
                    , message: messageText }])
    .initialize();

Usage:

var emailRegExp = "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$";
vManager.addValidator(["email"]
                    , [type: ValidationType.RegularExpression
                    , rule: emailRegExp
                    , message: "The email id that you entered does not seem to be correct." }])
    .initialize();

Demo:
Rule : Text entered should be an email id in correct format.

Enter Your Email Id:

Custom Validation

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.Custom, rule: customValidationFunctionName
                    , message: messageText }])
    .initialize();

Usage:

vManager.addValidator(["salary"]
                    , [type: ValidationType.Custom
                    , rule: CustomSalaryValidation
                    , message: "Salary should be in multiples of 100." }])
    .initialize();

Demo:
Rule : Value should be a multiple of 100.

Enter the Salary You Want:

Multiple Validations

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.Custom, rule: customValidationFunctionName
                    , message: messageText }, ...])
    .initialize();

Usage:

vManager.addValidator(["salary"], [{ type: ValidationType.Required
                    , message: "Salary cannot be blank." },
                    { type: ValidationType.Range
                    , rule: [1000, 2000]
                    , message: "Salary should be between $1000 and $2000." },
                    { type: ValidationType.Custom
                    , rule: CustomSalaryValidation
                    , message: "Salary should be in multiples of 100." }])
    .initialize();

Demo:
Rules:
Value is required.
Value must be between 1000 and 2000
Value should be a multiple of 100.

Enter the Salary You Want:

Validation Firing On Change Event

Syntax:

vManager.addValidator([validatorName]
                    , [{ type: ValidationType.Custom, rule: customValidationFunctionName
                    , message: messageText }, ...])
    .validateOnTextChange(true, SetSummary)
    .initialize();

Usage:

vManager.addValidator(["salary"], [{ type: ValidationType.Required
                    , message: "Salary cannot be blank." },
                    { type: ValidationType.Range
                    , rule: [1000, 2000], message: "Salary should be between $1000 and $2000." },
                    { type: ValidationType.Custom
                    , rule: CustomSalaryValidation, message: "Salary should be in multiples of 100." },
                    { type: ValidationType.MaxLength, rule: [4], message: "Maximum length for this field is 4." },
                    { type: ValidationType.MinLength, rule: [2], message: "Minimum length for this field is 2." },
                    { type: ValidationType.Numeric, message: "Only numbers are allowed in this field"}])
    .validateOnTextChange(true, SetSummary)
    .initialize();

Demo:
Change the value and click outside the field to fire the validation.

Enter the Salary You Want:

ValidateJS Documentation

.validate(validatorList)
Validates the validators which are provided in the array as a parameter.

Parameter Name	Description
validatorList	Type: An array of validator names All the validators that you pass with this parameter in a list format will be validated according to their collection of rules. After the validation is complete the notifications have been enabled will display on the UI.

.validateAll()
Validates all the validators that are currently added.

.addValidator(validators, params)
Adds a new validator.

Parameter Name	Description
validators[]	Type: Array An array of validator names. All the names that yoe add here will be added to the validator list with the same set of params that you pass along with them. This is useful when we want to have different validators with the same parameters.
params[{ValidationType, Rules, Message}, ...]	Type: Array of Object Multiple validation types can be added to a single or multiple validators using this paramenter. A list of object arguments is passed here.

Validation Types

Validation Type	Description
ValidationType.Required	Rule Format: N/A This is the required field validator. It makes sure that the user must input some value or makes some selection.
ValidationType.Compare	Rule Format: { compareType: CompareType, value: numerical value } This validation type compare the input value with the type of comparision rule provided. Following compare type are available for Compare Validation: CompareType.Equal CompareType.NotEqual CompareType.GreaterThan CompareType.GreaterThanEqual CompareType.LessThan CompareType.LessThanEqual
ValidationType.Range	Rule Format: [ minimum value, maximum value ] This validation type checks if the input value lies between the specified range or not.
ValidationType.RegularExpression	Rule Format: regular expression string This validation type validates the input with the regular expression string provided. For example: this is a regular expression to validate an email address: "^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$"
ValidationType.Custom	Rule Format: name of function to call This validation calls the provided function and passes the input control's value to that function as a parameter.
ValidationType.MinLength	Rule Format: [minimum length] This validation type validates that the input value's length is less than or equal to the minimum value.
ValidationType.MaxLength	Rule Format: [maximum length] This validation type validates that the input value's length is greater than or equal to the maximum value.
ValidationType.Alphabets	Rule Format: N/A This validation type makes sure that the input consists of only alphabets and whitespace.
ValidationType.AlphaNumeric	Rule Format: N/A This validation type makes sure that the input consists of only alphabets and numbers.
ValidationType.Numeric	Rule Format: N/A This validation type makes sure that the input consists of only numbers.

.getValidationResults(validator)
Returns the validation results in the form of an object array.
Return value format: {validatorName, sourceControl, type, message}

Parameter Name	Description
validator	Type: string Gives the validation results of a particular validator. If no parameter is passed then validation results of all the validators combined will be returned.

.setPassImage(boolean)
Set a custom image to show if the validation is passed.

Parameter Name	Description
boolean	Type: boolean value This function can be used to change the default image that is shown when all the validations for a particular validator are passed.

.setFailImage(boolean)
Set a custom image to show if the validation is failed.

Parameter Name	Description
boolean	Type: boolean value This function can be used to change the default image that is shown when any single validation for a particular validator is failed.

.showFailToolTips(boolean)
Show/hide validation message's tooltips if the validation is failed.

Parameter Name	Description
boolean	Type: boolean value This function can be used to turn failed validation message tooltip on or off.

.showFailImgNotification(boolean)
Show/hide image notification if the validation is failed.

Parameter Name	Description
boolean	Type: boolean value When set to true the notification image for the failed validations will display, when set to false then the image will not display.

.showPassImgNotification(boolean)
Show/hide image notification if the validation is passed.

Parameter Name	Description
boolean	Type: boolean value When set to true the notification image for the passed validations will display, when set to false then the image will not display.

.highlightBackground(boolean)
Highlight background of he input element if the validation is failed.

Parameter Name	Description
boolean	Type: boolean value When set to true the background of the input element will be highlighted and will be set to #FFE4E1. Note: as of now turning this flag on will remove any custom css class that you have applied on your input element.

.validateOnTextChange(f, onComplete)
Fires validation for the validator on text change event.

Parameter Name	Description
f	Type: boolean value When set to true the validations for all the validators will fire on the input change event.
onComplete	Type: function name This function will be called after the input elements are done validating. A list of validator names which were originally passed to the .validate() function will be supplied as a parameter to this function.

.isValid(validatorList)
Checks if any validator is correctly validated or not.

Parameter Name	Description
validatorList	Type: Array Returns false if there is any failed validation message after the last validation run for the specified validators, else returns true. If validatorList is empty or undefined then the function checks for all the available validators.