Tuesday, January 7, 2014

AUI Form Validator in Liferay

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

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

  1. Add new rule to validator along with exited rules using AUI Mix method
  2. Add new error message to validator along with existed error messages AUI Mix method
  3. 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

Popular Posts

Recent Posts

Recent Posts Widget