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 tag in 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
Posts
0 comments :
Post a Comment