JavaScript Validation Library  (ezval)

JavaScript validation library provides simple and very easy way to validate the user input. This allows you to write your own keyword implementation and also it supports custom validations.

How to implement validations using this library?

Define a rule attribute to the element which you need to validate. The value of the rule attribute has to be placed in curly braces as shown below. There are two ways to define a rule, one is set rule attribute to the element and other is through javascript using $v.addRule method ($v is instance of ezValidation).

validation rule :

{'msg', 'keyword1','keyword2:format', custom_function}


{'', {type:'keyword1', format:'', msg:}, 'keyword2:format', custom_function }

Note: Don't enclose the custom function with single quotation marks.


<div id="container">
  <input type="text" value="" rule="{'First Name', 'required'}" />
  <input type="text" value="" rule="{'Amount', 'required', 'currency'}" />
  <input type="text" value="" rule="{'DOB', 'date:mm/dd/yyyy'}" />
  <input type="submit" value="Submit" onclick="return $v.validate('container')" />
Validation-keyword Description
required Validate data, whether it is entered/selected.
int Number of bits can be defined to validate the input.

For Eg: 16 Bit integer: int:16,
             32 Bit integer:int:32
unsigned-int Number of bits can be defined to validate the input.

For 16 Bit integer: unsigned - int :16,
      32 Bit integer:unsigned - int :32
decimal Precision and scale can be defined to validate the input.
currency Currency validation
date      Supported date formats are mm/dd/yyyy and dd/mm/yyyy
maxlen  maxlen:<len>

For eg: maxlen:5
minlen  minlen:<len>

For eg: minlen:5
range range:<min,max>

Eg: range:1,100

regexp regexp:<pattern>

Example for only digits: regexp:[0-9]   or  regexp:\\d 
{type:'regexp', format:[0-9], msg:'Enter only digits.'}

email Email ID validation
extension This'll validate the extension of file.

Multiple extensions can be defined using pipe (|) sign

For eg: .gif|.jpg|.png
url Server side validation can also be performed using url keyword.

url:<url string>

Request will be sent to the server in syncronous way.

Eg I:

Eg II:

Value parameter will be concatenated and send the request
to the server for validation.

See more details in the below server side validation example.

Define validations using javascript:

$v.addRule(elementid, ruleString)

Trigger the validation rules:

$v.validate(containerElementid, ruleCallBack)

validate method fire the validations against the defined rules. validate method returns boolean value true or false.
rulecallBack will be invoked on each rule execution.

Define custom messages:

$v.customMessage = true;

Multiple messages are separated by "\n" as shown above. 

Display error messages in different styles using $v.errorDisplayMode(mode,containerId)

Display mode values:

1 = Alert box 
2 = Adjacent to each field
3 = To display in a target panel (specify the container element id like div or span element id which you would like to display in it.)

a. Custom message can be defined along with the rule.

    Eg #1: rule="{'', {type:'required', msg:'Enter valid data.'}}"

    Eg #2: rule="{'', {type:'decimal', format:'5,2' msg:'Enter valid data.'}}"

c. Add-on functions

    i.  $v.isFormDirty Method: Validate whether content has been modified or not.

       Syntax: isFormDirty: function (objForm, msg, exclude_es_str_csv)

       objForm: Form object 

       msg : Message you wish to display if there are no changes

       exclude_es_str_csv : Exclude elements when it checks for modifications.
                                        Data type of the exclude_es_str_csv parameter is string and pass elements by comma.

   ii. $v.clear Method: Clear the values of input elements.

        Syntax: clear: function (objId, exclude_es_ar)

        objId :    ID of the container element    

        exclude_es_ar: array of elements names which you wish to exclude

d. Plugin implementaion: Now you can implement your own keyword and their functionality.

    Eg: phone number validation  and "phone" as a keyword

$v.plugin('phone', function(callbackObj){ 
        /* Available members of callbackObj     
        callbackObj.val */

        /* Write your logic here */ 
        /* return either
                boolean(true/false) or object      
                {isValid:  true/false, msg:''}      
                if user custom message not defined, 
                then your plug-in related message will be considered. 

 e. Trigger Validations.

  $v.validate('', [callBack=$v.ruleCallback]);

   ii. $v.errCssClass memeber for set the CSS class of elements which have errors.   

      And it will set back to original, if errors resolved.

this will be called when validation is broken, where you can alter the message

$v.messageCallback = function(msgObj) {} 


set your own custom message box

$v.messagebox = function (msgText) {}

Browser Support : IE 6.0+, Firefox 2.0+, Google Chrome 2.0+, Safari 3.0+

Last edited Jun 27, 2012 at 5:39 AM by rjinaga, version 20