Objective:
Use AUI Form Validator
to validate form data from client side.
Environment:
Liferay 6.2 +Tomcat 7.x+MySQL 5.1
Note:
The code will work for portal 6.2 version.
Download Liferay AUI Form Validator portlet from following location
You can find source and war file
Portlet
Screen:
Procedure for deploy the portlet:
You can use war file and directly place in your portal deploy folder and
test or you can also use source to deploy the portlet.
Once portlet is deployed successfully you can see the portlet in sample
category name as AUI Form Validator.
Liferay have given AUI Validator to validate form elements.
Liferay have inbuilt Validator tag by using this tag we can validate form data
from the client side with minimal java script.
The following is tag
<aui:validator name="required " errorMessage="Field is
required" >
|
This tag has two attribute
Name
(required):
This is name
of the Validator. This attribute is required attribute for rag. Liferay have
provided many default Validator
ErrorMessage:
This will
used to pass error message for Validator. If we not pass then it will display default
error messages. The default error message only for default Validator those are provided
by liferay.
Note:
This Validator tag we need to pass inside <aui:input/> tag, you can pass multiple Validators for one input element and every Validator has
its own error message or we can pass our custom messages through errorMessage attribute.
Example:
<aui:input name="firstName" value='' label="Name">
<aui:validator name="required"/>
<aui:validator name="alpha"/>
</aui:input>
|
The
following are liferay provided Default Validators
You can pass following Validators for name attribute
value in <aui:validator/> tag.
AcceptFiles:
It will used to file html element it will check the
file valid extension . you have provide file extension as comma separated.
Default
Error Message:
Please enter a value with a valid extension
Example:
<aui:validator name="acceptFiles">'jpg,png,tif,gif'</aui:validator>
|
Alpha:
This Validator can accept only alphabets for input
value.
Default
Error Message:
Please enter only alpha characters.
Example:
<aui:input name="firstName" value='' label="Name">
<aui:validator name="alpha"/>
</aui:input>
|
Alphanum:
This will accept alphabets and numbers
Default
Error Message:
Please enter only alphanumeric characters.
Example:
<aui:input name="userName" value='' label="userName">
<aui:validator name="alphanum"/>
</aui:input>
|
Date:
Validate date for input.
Default
Error Message:
Please enter a valid date.
Example:
<aui:input name="date" value='' label="Date of Birth">
<aui:validator name="date"></aui:validator>
</aui:input>
|
Digits:
Accept digits
Default
Error Message:
Please enter only digits
.
Example:
<aui:input name="phoneNumber" value='' label="Phone
Number">
<aui:validator name="digits"></aui:validator>
</aui:input>
|
Email:
Validate
email addresses
Default
Error Message:
Please enter a valid email address.
Example:
<aui:input name="email" value='' label="Email">
<aui:validator name="email"/>
</aui:input>
|
EqualTo:
This Validator used for to compare two field values
example password match
Default
Error Message:
Please enter the same value again.
Example:
<aui:input name="password1" id="password1" value='' label="Password">
<aui:validator name="required"></aui:validator>
</aui:input>
<aui:input name="password2" value='' label="Re Type
Password">
<aui:validator name="equalTo">'#<portlet:namespace />password1'</aui:validator>
</aui:input>
|
Max:
This Validator check the value which should be less
than to provided value. Like checking age
Default
Error Message:
Please enter a value less than or equal to X
Example:
<aui:input name="age" value='' label="Age">
<aui:validator name="max">60</aui:validator>
</aui:input>
|
Min:
This Validator check the value which should be greater
than the value provided to Validator. Like checking age
Default
Error Message:
Please enter a value greater than or equal to X
Example:
<aui:input name="age" value='' label="Age">
<aui:validator name="min">18</aui:validator>
</aui:input>
|
MaxLength:
Check for the length or number of characters for input
value which should less then provided value for Validator.
Default
Error Message:
Please enter no more than X characters
Example:
<aui:input name="phoneNumber" value='' label="Phone
Number">
<aui:validator name="maxLength">10</aui:validator>
</aui:input>
|
MinLength:
Check for the length or number of characters for input
value which shoul more than provided value in Validator.
Default
Error Message:
Please enter at least X characters.
Example:
<aui:input name="phoneNumber" value='' label="Phone
Number">
<aui:validator name="minLength">8</aui:validator>
</aui:input>
|
Number:
Accept only numbers for input value.
Default
Error Message:
Please enter a valid number.
Example:
<aui:input name="age" value='' label="Age">
<aui:validator name="number"></aui:validator>
</aui:input>
|
Required:
It make field is mandatory to fill.
Default
Error Message:
This field is required..
Example:
<aui:input name="userName" value='' label="userName">
<aui:validator name="required"/>
</aui:input>
|
URL:
Check for the valid URL
Default
Error Message:
Please enter a valid URL.
Example:
<aui:input name="webSite" value='' label="Website Address">
<aui:validator name="url"/>
</aui:input>
|
Custom
Validator
As of now we have seen default Validators those are provided by liferay.
Now we will see how to write custom Validators.
Step:
1
We need use <aui:validator/>
tag enclosed by <aui:input>
and provide values for name and errorMessage attributes.
Example:
<aui:input name="age" value='' label="Age">
<aui:validator name="custom" errorMessage="You must
have 18 years or more" >
</aui:validator>
</aui:input>
|
Step:
2
Within <aui:validator/>
tag we have to write AUI JavaScript
which should have our custom logic and the function should return either true
or false.
Example:
<aui:input name="age" value='' label="Age">
<aui:validator name="custom" errorMessage="You must
have 18 years or more" >
function
(val, fieldNode, ruleValue) {
var
result = false;
if
(val >=18) {
result
= true;
}
return
result;
}
</aui:validator>
|
Assume we need to check the age of user should more
than 18 years .
The following is custom Validator to check age
should more than 18 years
<aui:input name="age" value='' label="Age">
<aui:validator name="custom" errorMessage="You must
have 18 years or more" >
function
(val, fieldNode, ruleValue) {
var
result = false;
if
(val >=18) {
result
= true;
}
return
result;
}
</aui:validator>
</aui:input>
|
The following is complete JSP page have all Validators
<%@ taglib
uri="http://java.sun.com/portlet_2_0" prefix="portlet" %>
<%@ taglib
uri="http://liferay.com/tld/aui" prefix="aui" %>
<%@ taglib
uri="http://liferay.com/tld/theme" prefix="liferay-theme" %>
<%@ taglib
uri="http://liferay.com/tld/ui" prefix="liferay-ui" %>
<liferay-theme:defineObjects />
<portlet:defineObjects />
<aui:form name="fm2" action=""
method="post">
<aui:input name="userName"
value='' label="User
Name">
<aui:validator name="required"
/>
<aui:validator name="alphanum"
/>
</aui:input>
<aui:input name="firstName"
value='' label="First
Name">
<aui:validator name="required"
/>
<aui:validator name="alpha"
/>
</aui:input>
<aui:input name="lastName"
value='' label="Last
Name">
<aui:validator name="alpha"
/>
</aui:input>
<aui:input name="email"
value='' label="Email">
<aui:validator name="email"
/>
</aui:input>
<aui:input name="date"
value='' label="Date of
Birth">
<aui:validator name="date"></aui:validator>
</aui:input>
<aui:input name="phoneNumber"
value='' label="Phone
Number">
<aui:validator name="digits"></aui:validator>
<aui:validator name="minLength">8</aui:validator>
<aui:validator name="maxLength">10</aui:validator>
</aui:input>
<aui:input name="price"
value='' label="Price
Range">
<aui:validator name="number"></aui:validator>
<aui:validator name="min">200</aui:validator>
<aui:validator name="max">1000</aui:validator>
</aui:input>
<aui:input name="password1"
id="password1" value='' label="Password"
type="password">
<aui:validator name="required"></aui:validator>
</aui:input>
<aui:input name="password2"
value='' label="Re Type
Password"
type="password">
<aui:validator name="required"
/>
<aui:validator name="equalTo">'#<portlet:namespace
/>password1'</aui:validator>
</aui:input>
<aui:input name="webSite"
value='' label="Website
Address">
<aui:validator name="url"
/>
</aui:input>
<aui:input name="age"
value='' label="Age">
<aui:validator name="custom"
errorMessage="You must
have 18 years or more">
function (val,
fieldNode, ruleValue) {
var result = false;
//alert(val);
if (val
>=18) {
result = true;
}
return result;
}
</aui:validator>
</aui:input>
<aui:button type="submit"
name="save" value="Save" />
</aui:form>
|
Author
Meera
Prince
Posts
