Liferay AUI Validator

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

https://sourceforge.net/projects/meeralferay/files/LiferayAUIValidatorPortlet/

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