Tuesday, January 7, 2014

Liferay Form Validator

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
  1. Include AUI tag in JSP page
  2. Load liferay-form java script using AUI use method
  3. 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

Popular Posts

Recent Posts

Recent Posts Widget