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
Ankara
ReplyDeleteAntalya
istanbul
Ordu
izmir
OVTX1W
elazığ
ReplyDeletebilecik
kilis
sakarya
yozgat
SMZAKK
ordu evden eve nakliyat
ReplyDeletebursa evden eve nakliyat
konya evden eve nakliyat
osmaniye evden eve nakliyat
bitlis evden eve nakliyat
6QCT
AFE22
ReplyDeleteTunceli Parça Eşya Taşıma
Urfa Şehir İçi Nakliyat
Edirne Şehirler Arası Nakliyat
Iğdır Şehirler Arası Nakliyat
Elazığ Evden Eve Nakliyat
Artvin Şehirler Arası Nakliyat
Kars Lojistik
Bartın Şehirler Arası Nakliyat
Çerkezköy Koltuk Kaplama
B0AED
ReplyDeleteÜnye Çelik Kapı
Bilecik Parça Eşya Taşıma
Kırklareli Evden Eve Nakliyat
Ä°stanbul Evden Eve Nakliyat
Çerkezköy Koltuk Kaplama
MuÅŸ Lojistik
Kastamonu Şehirler Arası Nakliyat
İzmir Şehirler Arası Nakliyat
Hakkari Parça Eşya Taşıma
DE1EE
ReplyDeleteniÄŸde mobil sohbet
diyarbakır canlı sohbet sitesi
canli sohbet chat
adıyaman tamamen ücretsiz sohbet siteleri
osmaniye ücretsiz sohbet
muş görüntülü sohbet canlı
şırnak telefonda rastgele sohbet
bartın sesli sohbet uygulamaları
sivas canlı sohbet ücretsiz
7C5FB
ReplyDeleteparibu
bitexen
mexc
referans kodu binance
btcturk
probit
rastgele canlı sohbet
binance
binance
C11E5
ReplyDeleteprobit
bitrue
kraken
mexc
gate io
bitexen
kripto para nereden alınır
bingx
probit
12F9E
ReplyDeletekripto para telegram
en eski kripto borsası
referans kodu binance
en iyi kripto para uygulaması
bitcoin nasıl kazanılır
referans kodu
bitcoin giriÅŸ
binance
kızlarla canlı sohbet
2E6DF
ReplyDelete4g mobil proxy
kripto para kanalları telegram
kraken
referans kimliÄŸi
mexc
September 2024 Calendar
February 2024 Calendar
binance
btcturk
8D0FF70E5A
ReplyDeletecam ÅŸov
themra macun
cialis
telegram görüntülü şov
viga
kamagra
canli web cam show
sertleÅŸtirici
degra
3AF2AAC71C
ReplyDeletecam ÅŸov
cobra vega
ereksiyon hapı
görüntülü şov whatsapp numarası
viagra
whatsapp görüntülü şov
maxman
cam show
performans arttırıcı