This plugin is based on jQuery library and helps in validating html forms. Plugin provides default error messages which can be customised.
Getting started/Quick start guide
Take a look to the following code first:
<!DOCTYPE html>
<html>
<head>
<title>Jquery validation plugin</title>
</head>
<body>
<form id=”myForm” onsubmit=”return app.validateForm()” novalidate=”true” >
<div>
<input name=”first_name” class=”isRequired isChar” onblur="app.validateField(this);">
<span class=”error”></span>
</div>
<div>
<input name=”last_name” class=”isRequired isChar” onblur="app.validateField(this);">
<span class=”error”></span>
</div>
<button type=”reset” onclick=” app.resetForm()”>Reset</button>
<button type=”submit”>Submit</button>
</form>
<body>
</html>
<!--Add source files-->
<script src=”path/to/jquery.min.js”></script>
<script src=”path/to/validation.js”></script>
<script>
var app= validationJs(“#myForm”);
</script>Step 1 (Including Library):
This plugin is based on jQuery library, so make sure you have included (linked) jQuery library in your webpage. Now include validation.js in your webpage after jQuery link as shown below.
<script src="path/to/jquery.min.js" type="text/javascript" ></script>
<script src="path/to/validation.js" type="text/javascript" ></script>
Step 2 (Plugin Initialization):
After adding library path properly you need to initialize this plugin. For this you will use following code:
var app=validationJs(formSelector);Note: You need to initialize plugin for each form in different variable, say "app1" (Abobe Initialization can not be used for different form in the same page).
Here “formSelector” is the css selector for your form. You can use ID, Class or anything according to your convenience.
For example:
<!--If you have created form with id “myForm”:-->
<form id=”myForm”>
…
…
</form>
<!--You need to initialize plugin by using following line of code-->
<script type="text/javascript">
var app=validationJs('#myform');
</script>Step 3 (Adding “novalidate”):
Add novalidate=”true” (or novalidate) in form tag, so that it will not use inbuilt HTML5 Validation.
<form id=”myForm” novalidate=”true”>
…
…
</form>
Step 4 (Adding element with “error” class):
Add an element next to Input element (or next to input's parent and so on), with error class to show error messages. Example:
<div>
<input type=”text”/>
<!--error element-->
<span class=”error”></span>
</div>
You can add error element as next element to input or parent of input. Additionally use error class to style your error message’s color/font etc.
Step 5 (Adding classes for validation):
Depending upon the requirements, add validation classes in your input element. Following validation classes are available:
- isRequired (Required field)
- isPhone (Indian standered mobile no.)
- isInteger (Integer, ex: 12, 25)
- isNumber (Number, ex: 10, 11.5)
- isDecimal (Decimal, ex: 11.5, 12.30)
- isDigits (Digits, use where length(no of digits) of integer matters)
- isEmail (Email)
- isUrl (URL)
- isDate (Defualt format yyyy/mm/dd)
- isRegex (regular expression. pattern attribute is required)
- isChar (charecters. A-Z and a-z)
- isLength (Length of input. Either min or max or both(min and max) atribute(s) should present)
- isAlphaNumeric (alphanumeric charecters. a-z, A-Z and 0-9)
Above classes can be used in combination or alone. We will learn about these classes in detail later.
Example:
<input class=”isRequired isPhone”>Step 6 (Validating field):
Bind the validation method to input field with events. You need to pass the reference of input field. Example:
<input class=”isRequired isPhone” onblur=”app.validateField(this)” >The method “app. validateField(this)” will validate this input field onblur event. If the input field is invalid, it will show error in error element (element with class "error") and in case of valid input it hide and remove error message from error element. Passing “this” is required in order to identify input field by plugin.
Step 7 (Validating Form):
Bind form to validate all fields on submit.
Example:
<form onsubmit=”return app.validateForm()” novalidate=”true”>
…
…
</form>The method “app.validateForm()”, validates all fields of the form at once and show errors if any. “return app.validateForm()” will prevent form submission when errors occurred.
Step 8 (Reset button):
Call “app.resetForm()” on click event of reset button. It hides all errors and set form in Initial condition. Example:
<button type=”reset” onclick=”app.resetForm()”>Reset</button>Now you are all set up and ready to fly!!
Plugin Options and Overriding defualt error messages
This plugin plays on the basis of error classes. Declaring input "type" attribute has no effect. But additional validation attributes like: min, max, pattern will work as usual.
- isRequired : Check for required type error. It can be applied to any Input type (Ex: text, number, date, email, select, redio and checkbox).
<input type="text" class="isRequired"/>
- isPhone : This class check for Indian standered mobile numbers.
<input type="text" class="isPhone"/>
- isInteger This class checks for valid javascript integer values(+/- 9007199254740991). Additionaly min max attributes can be used to validate input.
<input type="text" class="isInteger"/>
<!--or-->
<input type="text" class="isInteger" min="10"/>
<!--or-->
<input type="text" class="isInteger" max="20"/>
<!--or-->
<input type="text" class="isInteger" min="10" max="20"/>
- isNumber : This class checks for valid javascript number values. Additionaly min max attributes can be used to validate input.
<input type="text" class="isNumber"/>
<!--or-->
<input type="text" class="isNumber" min="10"/>
<!--or-->
<input type="text" class="isNumber" max="20.5"/>
<!--or-->
<input type="text" class="isNumber" min="10" max="20.5"/>
- isDecimal : This class checks for decimal values up to 2 decimal places. Additionaly min max attributes can be used to validate input.
<input type="text" class="isDecimal"/>
<!--or-->
<input type="text" class="isDecimal" min="10.20"/>
<!--or-->
<input type="text" class="isDecimal" max="20.50"/>
<!--or-->
<input type="text" class="isDecimal" min="10.20" max="20.50"/>
- isDigits : This class is used in the case where input length is large and Number (Ex: Account Number) and where length of input matters instead of value.
<input type="text" class="isDigits"/>
- isEmail : This class checks for valid email format.
<input type="text" class="isEmail"/>
- isUrl : This class checks for valid url format.
<input type="text" class="isUrl"/>
- isDate : This class checks for date value. Additionaly min max attributes can be used to validate. It works for the input format yyyy/mm/dd, yyyy-mm-dd and yyyy mm dd but the format can be changed by passing format option during initialization. (You will learn latter about passing options). Pass min max attribute in the same formate.
<input type="text" class="isDate"/>
<!--or-->
<input type="text" class="isDate" min="2017-07-01"/>
<!--or-->
<input type="text" class="isDate" max="2017-08-01"/>
<!--or-->
<input type="text" class="isDate" min="2017-07-01" max="2017-08-01"/>
- isChar : This class check for charecters (a-z, A-Z).
<input type="text" class="isChar"/>
- isAlphaNumeric : This class check for alphanumeric charecters (a-z, A-Z, 0-9).
<input type="text" class="isAlphaNumeric"/>
- isLength : This class validate input on the basis of its length. Atleast one attribute from min and max is required to work it. Do not use this class in combination with isInteger, isDecimal and isNumber classs, because min max attribute have different meaning with these inputs(They work with input values not with the length).
<input type="text" class="isLength"/>
- isRegex : This class uses pattern attribute to validate input. Pass your regular expression in pattern attribute. Following input check for the string having 3 letters.
<input type="text" class="isRegex" pattern="[A-Za-z]{3}"/>
Note: Above classes can be used alone or in combination. For example below code will check for input having maximum length 20 and should contain only alphabetic charecters.
<input type="text" class="isRequired isChar isLength" max="20">
Also validation plugin validate input sequentially in the order of classes (Order for isRequired class doesn't matters, it is alwayas the first validation). For example: In the below code first validation is isRequired, second is isChar and third is isLength. It means if you have invalid input, you will get error related to isRequired class first than you will get invalid charecter error and in last you will get length error.
<input type="text" class="isRequired isChar isLength" max="20">
Plugin Option with their default values are shown below. Options can be passed as second argument of "validationJs(selector, option)" function.
{
messaging:true,
formErrorClass: 'error',
preventSubmitOnError: true,
dateFormat: 'yyyy/mm/dd',
sevarErrorMsg: "Server validation failed!",
getErrorElement:undefined,
fieldSuccessCallback: undefined, //callback will get refrence of field as first parameter
fieldErrorCallback: undefined, //callback will get refrence of field as first parameter and error type as second parameter
formSuccessCallback: undefined, //callback will get refrence of form as first parameter
formErrorCallback: undefined, //callback will get refrence of form as first parameter
noValidateClass: 'novalidate',
errorClass: {
required: "isRequired",
phone: "isPhone",
integer: "isInteger",
number: "isNumber",
decimal: "isDecimal",
digits: "isDigits",
email: "isEmail",
url: "isUrl",
date: "isDate",
regex: "isRegex",
char: "isChar",
length: "isLength",
alphaNumeric: "isAlphaNumeric"
},
errorMsg: {
required: "This is required field!",
char: "This field can contain characters only!",
phone: "Phone Number should be a Number of 10 digits!",
integer: {
int_msg: "This field can contain integer only!",
min_msg: "Minimum value for this field is: ",
max_msg: "Maximum value for this field is: ",
min_max_msg: "Minimum and Maximum values for this field are: "
},
number: {
num_msg: "This field can contain numbers only!",
min_msg: "Minimum value for this field is: ",
max_msg: "Maximum value for this field is: ",
min_max_msg: "Minimum and Maximum values for this field are: "
},
decimal: {
dec_msg: "This field can contain decimal only!",
min_msg: "Minimum value for this field is: ",
max_msg: "Maximum value for this field is: ",
min_max_msg: "Minimum and Maximum values for this field are: "
},
digits: "This field can contain numbers only!",
date: {
date_msg: "This field has Invalid Date Format or Value!",
min_msg: "Minimum date value for this field is: ",
max_msg: "Maximum date value for this field is: ",
min_max_msg: "Minimum and Maximum date values for this field are: "
},
email: "Invalid Email Id!",
url: "Invalid Url!",
regex: "Field do not match required pattern!",
length: {
min_msg: "Minimum length for this field is: ",
max_msg: "Maximum length for this field is: ",
min_max_msg: "Minimum and Maximum length for this field are: "
},
alphaNumeric: "Only alphanumeric charecters allowed!"
}
}
Example:
var app = new validationJs(“#myForm”, {messaging:false, formErrorClass: 'custom-error-class'});Some times we need to refresh bindings of elements. Such cases are:
- When we add input fields at run time(validation time).
- When we rerender the input field (may be after server side validtion)
We can refresh the bindings whenever we found the case where binding may break.
var app= validationJs(“#myForm”);
app.refresh(); //this will refresh all bindings(form and inputs)Method: addErrorMsg()
Parameters: Object/Array of Object
Discription:
Suppose you have "First Name" field in the form and you want to show a customized error message like:
When required error occurs: First Name is required!
When someone enters number: First Name should only contains alphabatical character!
To achieve this you need to do following:
- Add a selector to the concerned input(may be ID or Class)
- Add error classes to input fields
- Create message object: rule name(rule name can be obtained by removing "is" from error class string and making first charecter of remaining string as lowercase) as Key and conerned message as Value.
- Now create another object with key as the selector of your input and value as a message object.
- Add this new object to your app object by using addErrorMsg() Method.
<input type="text" id="first_name" class="isRequired isChar" />
<span class="error"></span>var app=validationJs("#myform");
var first_name_msg={
"required": "First Name is required!",
"char": "First Name should only contains alphabatical character!"
};
app.addErrorMsg({selector: "#first_name", msg: first_name_msg}); //function can accept single object or array of such objectsTo add similler error messages to samillier type of fields use class as selector. For example your form has to emails, primary and secondary, and you want to provide common custom error messages.
To achieve this you need do following:
- Add a selector (class) to all concerned inputs (for both emails in this case, say "cstm-email").
- Add error classes to input fields
- Create message object: rule name(rule name can be obtained by removing "is" from error class string and making first charecter of remaining string as lowercase) as Key and conerned message as Value.
- Now create another object with key as the selector of your input and value as a message object.
- Add this new object to your app object by using addErrorMsg() Method.
<input type="text" id="first_name" name="first_name" class="isRequired isChar" />
<span class="error"></span>
<input type="email" name="primary_email" class="cstm-email isRequired" />
<span class="error"></span>
<input type="email" name="secondary_email" class="cstm-email isRequired" />
<span class="error"></span>var app=validationJs("#myform");
var first_name_msg={
"required": "First Name is required!",
"char": "First Name should only contains alphabatical character!"
};
var email_msg={
"required": "Email is required field, and this is first custom error message",
"email": "Email is invalid, and this is second custom error message"
};
app.addErrorMsg([
{selector: "#first_name", msg: first_name_msg},
{selector: ".cstm-email", msg: email_msg}
]); //function can accept single object or array of such objectsNOTE: If you use multiple selectors(classes or ids) to customize error message, post message object in array will override the previous message object.
Method: addRule()
Parameters:
-
Rule Name (String)
-
Error Class (String)
-
Error Message (String/Object)
-
Callback Function
Discription:
All parameters are required.
Rule Name is used to create a custom rule with the provided name and used by the plugin.
Error Class is the class you need to add in your input element. To maintain uniqueness in error class, you should create it by adding "is" prefix in rule name (ex: for rule name "customRule" use "isCustomRule" as error class).
Error Message can be String (say Case 1) if you want to show single message in all condition for your custom rule. If you want to show different messages depending upon condition use Object format (say Case 2). Ex: {error_1: "age can not be more than 150", error_2: "age can not be less then 0"}.
Callback Function contains your logic where you make decision for correct/incorrect input. It has three arguments, which contains:
-
Input field reference (ref)
-
Input field value and (val)
-
Message Object (msgObj): For Case 2, It can be modified if needed.
Note: If parameter "Error Message" is String you need to return true/false in callback function for valid/invalid inputs respectively. And if it is in Object format return an Object in callback function in following format:
For Valid input: {status:true}
For Invalid input: {status:false, type: "error_msg_key_of_message_obj"}
EXAMPLE (Case 1/Error Message parameter as String):
var app=validationJs("#myform");
//app.addRule(Rule_Name, Error_Class, Error_Message, Callback_function);
app.addRule("customRule", "isCustomRule", "Age is invalid (error message from customRule)", function(ref, val){
/*
"ref" contains the input element ref
"val" contains the input value
*/
if(val>0 && val<150)
return true;
else
return false;
});EXAMPLE (Case 2/Error Message parameter as Object):
var app=validationJs('#myform');
var errorMsg={
error_1: "Age can not be more than 150",
error_2: "Age can not be less then 0"
};
//app.addRule(Rule_Name, Error_Class, Error_Message_object, Callback_function);
app.addRule("customRule", "isCustomRule", errorMsg, function(ref, val, msgObj){
/*
msgObj is the copy of Error_Message_object (here errorMsg) used by the plugin. You can modify it if you need.
*/
if(val>150)
return {status:false, type:"error_1"};
else if(val<0)
return {status:false, type:"error_2"};
else
return {status:true};
});How to use custom rules?
Custom rule will be used similar to the native plugin rules. For example:
<input name="age" class="isInteger isCustomRule"/>
<span class="error"></span>