Objective:
Perform form validation in liferay development using AUI from validator.
AUI Form Validator:
This is simple AUI java script validator which is written in AUI JavaScript library.
This java script implemented in aui-form-validator.js file in AUI library
Environment:
Liferay 6.2 +Tomcat 7.x+MySQL 5.1
Note:
The code will work for portal 6.2 version you can try for 6.1 too.
Download AUI Form Validator portlet from following location
You can find source and war file
Portlet Screen:
Procedure for deploy portlet:
You can use war file and directly place in your portal deploy folder and test or you can also use source to deploy portlet.
Once portlet is deployed successfully you can see the portlet in sample category name as AUI Form Validator.
The following are the steps to use Liferay form validator in development
- Include AUI tagin JSP page
- Load aui-form-validator java script using AUI use method
- Define FormValidator instance by passing required properties.
Include AUI tag in JSP page
We already have AUI jsp tag we need to include this then we can get AUI tags support to JSP page
The following is include AUI tag in JSP
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %> |
Load aui-form-validator java script using AUI use method
Liferay have implemented form validation java script in aui-form-validator.js file so we need to load this java script using AUI use method as follows
<aui:script> AUI().use('aui-base',' aui-form-validator',function(A){ //write code here }); </aui:script> |
Define FormValidator instance by passing required properties
Now we need create FormValidator instance by passing validation rules and validation messages as follows
The following is simple code
<aui:input name="userName" value='' label="User Name"></aui:input> <aui:script> AUI().use('aui-base','liferay-form',function(A){ var rules = { <portlet:namespace/>userName: { required: true, alphanum:true }, }; var fieldStrings = { <portlet:namespace/>userName: { required: 'Type your email in this field.' }, }; new A.FormValidator( { boundingBox: '#<portlet:namespace/>fm2', fieldStrings: fieldStrings, rules: rules, showAllMessages:true } ); }); </aui:script> |
boundingBox : it speechify that where all input fields available, rules: is array of validation rules and each rule have some information about rule fiedStrings: this is array of error messaged from each rule with respect to each filed. This will override the default error messages and can add our custom error messages. |
Field Rule Anatomy
Example for field rule as follows
<portlet:namespace/>userName: { required: true, alphanum:true }, We have to specify all the validation as an array with respect to field name. If specify the true value for rule then validation will be fired. |
The following are default Validators provided by liferay
alpha, required, equalTo, min, max, number, maxLength, minLength, url, email, alphanum, date |
Writing custom Validator
Some time we need write our own validation rules for form then we have to do like as follows.
- Add new rule to validator along with exited rules using AUI Mix method
- Add new error message to validator along with existed error messages AUI Mix method
- Create Form Validator instance and pass the new rules and new error messages
Assume we are going to write custom rule that is used must have more than 18 years.
Add new rule to validator along with exited rules using AUI Mix method
AUI mix method is used to mixing two arrays
var DEFAULTS_FORM_VALIDATOR = A.config.FormValidator; A.mix( DEFAULTS_FORM_VALIDATOR.RULES, { customRuleForAge:function (val, fieldNode, ruleValue) { var result = false; if (val >=18) { result = true; } return result; }, anotherRule:function (val, fieldNode, ruleValue) { //code here } }, true ); |
Add new error message to validator along with existed error messages AUI Mix method
Now we need to add new error message to our custom rules as follows
A.mix( DEFAULTS_FORM_VALIDATOR.STRINGS, { customRuleForAge:"Age Should Be more than 18", anotherRule:"Another rule error message", }, true ); |
Create Form Validator instance and pass the new rules and new error messages
Once we mix the new rules and new error message then we have to create Form Validator object and need pass rules and error messages
The following is complete example
<aui:input name="age" value='' label="Age"></aui:input> <aui:script> AUI().use('aui-form-validator', function(A) { var DEFAULTS_FORM_VALIDATOR = A.config.FormValidator; A.mix( DEFAULTS_FORM_VALIDATOR.RULES, { customRuleForAge:function (val, fieldNode, ruleValue) { var result = false; if (val >=18) { result = true; } return result; }, }, true ); A.mix( DEFAULTS_FORM_VALIDATOR.STRINGS, { customRuleForAge:"Age Should Be more than 18", }, true ); var rules = { <portlet:namespace/>age: { customRuleForAge: true } }; // override default error messages var fieldStrings = {}; new A.FormValidator( { boundingBox: '#<portlet:namespace/>fm2', fieldStrings: fieldStrings, rules: rules, showAllMessages: true } ); } ); </aui:script> |
The following is complete JSP code
<%@ include file="init.jsp"%> <h1>Liferay Form Validation using AUI Form Validator</h1> <aui:form name="fm2" id="fm2" action="" method="post"> <aui:input name="userName" value='' label="User Name"></aui:input> <aui:input name="firstName" value='' label="First Name"></aui:input> <aui:input name="lastName" value='' label="Last Name"></aui:input> <aui:input name="email" value='' label="Email"></aui:input> <aui:input name="date" value='' label="Date of Birth"></aui:input> <aui:input name="phoneNumber" value='' label="Phone Number"></aui:input> <aui:input name="price" value='' label="Price Range"></aui:input> <aui:input name="password1" id="password1" value='' label="Password" type="password"></aui:input> <aui:input name="password2" value='' label="Re Type Password" type="password"></aui:input> <aui:input name="webSite" value='' label="Website Address"></aui:input> <aui:input name="age" value='' label="Age"></aui:input> <aui:button type="submit" name="numberSearch" value="Save" /> </aui:form> <aui:script> AUI().use('aui-form-validator', function(A) { var DEFAULTS_FORM_VALIDATOR = A.config.FormValidator; A.mix( DEFAULTS_FORM_VALIDATOR.RULES, { customRuleForAge:function (val, fieldNode, ruleValue) { var result = false; if (val >=18) { result = true; } return result; }, }, true ); A.mix( DEFAULTS_FORM_VALIDATOR.STRINGS, { customRuleForAge:"Age Should Be more than 18", }, true ); //define rules for fields var rules = { <portlet:namespace/>userName: { required: true, alphanum:true }, <portlet:namespace/>firstName: { required: true, alpha:true }, <portlet:namespace/>lastName: { alpha:true }, <portlet:namespace/>email: { email: true, required: true }, <portlet:namespace/>date: { required: true, date:true }, <portlet:namespace/>phoneNumber: { required: true, digits: true, rangeLength:[8, 10] }, <portlet:namespace/>price: { required: true, digits: true, min: 100, max: 500 }, <portlet:namespace/>password1: { required: true }, <portlet:namespace/>password2: { equalTo: '#<portlet:namespace/>password1', required: true }, <portlet:namespace/>webSite: { url: true }, <portlet:namespace/>age: { customRuleForAge: true } }; // overrding default error messages for fields var fieldStrings = { <portlet:namespace/>email: { required: 'Type your email in this field.' }, <portlet:namespace/>name: { required: 'Please provide your name.' } }; new A.FormValidator( { boundingBox: '#<portlet:namespace/>fm2', fieldStrings: fieldStrings, rules: rules, showAllMessages: true } ); } ); </aui:script> |
Related Articles
Author
Meera Prince
0 comments:
Post a Comment