Showing posts with label liferay validator. Show all posts
Showing posts with label liferay validator. Show all posts

Tuesday, January 7, 2014

Form Validation in Liferay

  
Objective:

Perform form validation in liferay development.

Approaches to achieve

Liferay form validation we can do in different approaches.

The following are the ways
  1.  Liferay AUI Validator Tag
  2.  Liferay Form Validator
  3. AUI Form Validator

Liferay Validator Tag:

Liferay have come with AUI validator JSP tag we can use this JSP tag and we can perform the form validations.

The following is complete tutorial about Liferay AUI Validator Tag

http://www.liferaysavvy.com/2013/12/liferay-aui-validator.html

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 lifeay

The following is complete tutorial about Liferay Form Validator

http://www.liferaysavvy.com/2014/01/objective-perform-form-validation-in.html

AUI Form Validator

AUI Form Validator is come from AUI library. This is pure AUI form validator.
Liferay Form Validator extends by AUI Form Validator.

The following is tutorial about AUI Form Validator

http://www.liferaysavvy.com/2014/01/aui-form-validator-in-liferay.html

Author

Meera Prince

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

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

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

http://www.liferaysavvy.com/2013/12/liferay-aui-validator.html

http://www.liferaysavvy.com/2013/12/liferay-aui-validator.html

Author

Meera Prince
Subscribe to: Posts ( Atom )

Recent Posts

Recent Posts Widget

Popular Posts