Objective:
Perform form validation in liferay development using
liferay from validator.
Liferay
Form Validator:
This is simple AUI java script validator which is
written by liferay people to do form validations. This script inherit the base
properties from pure AUI form Validator
This java script implemented in liferay-form.js file in Liferay
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 Liferay 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 tag in JSP page
- Load liferay-form java script using AUI use method
- Define Liferay.Form.register instance to 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 liferay-form java script using AUI use
method
Liferay have implemented form validation
java script in liferay-form.js file so we need to load this java script using
AUI use method as follows
<aui:script>
AUI().use('aui-base','liferay-form',function(A){
//write code here
});
</aui:script>
|
Define Liferay.Form.register
instance to passing required properties
Now we need
register form using Liferay.Form.register
method and we need specify the form id
and required validation rules 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){
Liferay.Form.register(
{
id: '<portlet:namespace/>fm2',
fieldRules:
[
{
body: '',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>userName',
validatorName:'alphanum'
},
{
body: '',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>userName',
validatorName:'required'
},
]
});
});
</aui:script>
|
id : form id
fieldRules:
is array of rules and each rule have some information about rule
|
Field Rule Anatomy
Example for field rule as follows
{
body:
' ',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>userName',
validatorName:'alphanum'
}
body: in this we pass some custom data .
custom:
it specify whether it is default rule or custom rule.
errorMessage:
to specify error message if we not mention for default rule then it will take
default error message.
validatorName:
this name validator
|
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 the form then we have to do like as follows.
When we want use custom validation then we have to specify custom property value as true then validator consider that is custom validation..
The following is simple example assume
user age must more than 18 years then we have to
write as follows and we need
to specify custom property value as true.
<aui:input name="age" value='' label="Age"></aui:input>
The
following is sample custome rule for age more than 18 years
<aui:script>
AUI().use('aui-base','liferay-form',function(A){
Liferay.Form.register(
{
id: '<portlet:namespace/>fm2',
fieldRules:
[
{
body:function
(val, fieldNode, ruleValue) {
var result = false;
if (val >=18) {
result = true;
}
return result;
},
custom:true,
errorMessage:'age
must more than 18 years',
fieldName:
'<portlet:namespace/>age',
validatorName:'customerRuleForAge'
},
]
});
});
</aui:script>
|
The following is complete JSP code
<%@ include file="init.jsp"%>
<h1>Liferay
Form Validation using Liferay 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-base','liferay-form',function(A){
Liferay.Form.register(
{
id: '<portlet:namespace/>fm2',
fieldRules:
[
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName: '<portlet:namespace/>lastName',
validatorName:
'alpha'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>password1',
validatorName:
'required'
},
{
body:
'#<portlet:namespace/>password1',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>password2',
validatorName:
'equalTo'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName: '<portlet:namespace/>password2',
validatorName:
'required'
},
{
body:
200,
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>price',
validatorName:
'min'
},
{
body:
1000,
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>price',
validatorName:
'max'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>price',
validatorName:
'number'
},
{
body:
10,
custom:
false,
errorMessage:
'',
fieldName: '<portlet:namespace/>phoneNumber',
validatorName:
'maxLength'
},
{
body: 8,
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>phoneNumber',
validatorName:
'minLength'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>phoneNumber',
validatorName:
'digits'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>webSite',
validatorName:
'url'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>email',
validatorName:
'email'
},
{
body:
function (val, fieldNode, ruleValue) {
var
result = false;
if (val >=18) {
result
= true;
}
return result;
},
custom:
true,
errorMessage: 'Age must More than 18
years',
fieldName:
'<portlet:namespace/>age',
validatorName:
'custom_rule_age'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>userName',
validatorName:
'alphanum'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>userName',
validatorName:
'required'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>date',
validatorName:
'date'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName: '<portlet:namespace/>firstName',
validatorName:
'alpha'
},
{
body:
'',
custom:
false,
errorMessage:
'',
fieldName:
'<portlet:namespace/>firstName',
validatorName:
'required'
}
]
});
});
</aui:script>
|
Related
Articles
Author
Meera
Prince
Posts
