Site icon Pro Liferay

Alloy Form Validation Part 1


You need client side validations. Only vanilla java script is not enough. You might used jQuery, Ext JS or some other third party javascript framework. If you use alloy form fields then there is no need of any third party JS framework to validate your form fields before submitting the data. No need of any JS integration. Alloy Validator is under the hood. This article explains the use of Liferay Alloy Form Validation (aui:validator). At the end of this article you will understand  Liferay Alloy Form Validation framework. Liferay Alloy Form Validation is done by the tag aui:validator.


The default 16 validations

1. Alloy acceptFiles Validator

Use: Consider you have upload file functionality in your portlet. Yo don’t want to allow user to upload anything as they want. Use this validator to validate file extension before uploading.

How to use: Provide the comma separated file extensions that you need to validate .

Sample Code: Use attribute name=”acceptFiles” for the tag aui:validator.

  <aui:input  name="acceptFiles" type="file" label="AcceptFiles Validator">
     <aui:validator name="acceptFiles">'pdf,png'</aui:validator>
  </aui:input>

Default Error Message: Please enter a value with a valid extension ({0}).

Here {0} is just placeholder. It will be replaced by the extensions that’s mentioned as above.For example “Please enter a value with a valid extension (pdf,png).” 


2. Alloy alpha Validator

Use: For an input field if you want to restrict users to enter only alphabets then use this validator.

How to use: Use attribute name=”alpha” for the tag aui:validator.

Sample Code:

  <aui:input  name="alpha" label="Alpha Validator">
     <aui:validator name="alpha"/>
  </aui:input>
Default Error Message: Please enter only alpha characters.
 

3. Alloy alphanum Validator

Use: For an input field if you want to restrict users to enter only alphabets and numeric then use this validator.

How to use: Use attribute name=”alphanum” for the tag aui:validator.

Sample Code:

  <aui:input  name="alphanum" label="Alphanum Validator">
     <aui:validator name="alphanum"/>
  </aui:input>
Default Error Message: Please enter only alphanumeric characters.
 

4. Alloy date Validator

Use: For an input field if you want to restrict users to enter only valid date then use this validator.

How to use: Use attribute name=”date” for the tag aui:validator.

Sample Code:

   <aui:input  name="date" label="Date Validator">
     <aui:validator name="date"/>
  </aui:input>
Default Error Message: Please enter a valid date.

5. Alloy digits Validator

Use: For an input field if you want to restrict users to enter only digits then use this validator.

How to use: Use attribute name=”digits” for the tag aui:validator.

Sample Code:

  <aui:input  name="digits" label="Digits Validator">
     <aui:validator name="digits"/>
  </aui:input>
Default Error Message: Please enter only digits.

6. Alloy email Validator

Use: For an input field if you want to restrict users to enter only valid email then use this validator.

How to use: Use attribute name=”email” for the tag aui:validator.

Sample Code:

   <aui:input  name="email" label="Email Validator">
     <aui:validator name="email"/>
  </aui:input>
Default Error Message: Please enter a valid email address.

7. Alloy equalTo Validator

Use: Sometimes we need to provide same value for two input fields. For example password and confirm password both the field should have same value. For this type of validation use this validator.

How to use: Use attribute name=”equalTo” for the tag aui:validator.

Sample Code:

   <aui:input  name="permanentAddress" id="permanentAddress" label="Permanent Address">
     <aui:validator name="required"/>
  </aui:input>
  <aui:input  name="tempAddress" label="Temporary Address">
    <aui:validator name="equalTo">'#permanentAddress'</aui:validator>
  </aui:input>
In the above code Permanent Address and Temporary Address should be same. 

Default Error Message: Please enter the same value again.


8. Alloy max Validator

Use: This validator is used when a value should not exceed maximum number for a given form field. For example if max=5 then any number less than or equal to 5 is valid input otherwise invalid .

How to use: Use attribute name=”max” for the tag aui:validator.

Sample Code:

  <aui:input  name="max" label="Maximum 100">
     <aui:validator name="max">100</aui:validator>
  </aui:input>
Default Error Message: Please enter a value less than or equal to {0}. 

Here {0} is the place holder which will be replaced by the maximum number as written in the code. For example “Please enter a value less than or equal to 100.


9. Alloy maxLength Validator

Use: This validator is used to validate maximum number of characters. 

How to use: Use attribute name=”maxLength” for the tag aui:validator .

Sample Code:

<aui:input  name="maxLength" label="maxLength only 5">
     <aui:validator name="maxLength">5</aui:validator>
  </aui:input>
Default Error Message: Please enter no more than {0} characters.

Here {0} is the place holder that will be replaced by the max length as written in the above code. For example “Please enter no more than 5 characters.


10. Alloy min Validator

Use: This validator is used to validate minimum number. 

How to use: Use attribute name=”min” for the tag aui:validator.

Sample Code:

 <aui:input  name="min" label="Min 5">
     <aui:validator name="min">5</aui:validator>
  </aui:input>
Default Error Message: Please enter a value greater than or equal to {0}.

Here {0} is the place holder that will be replaced by the min number as mentioned in the above code. For example “Please enter a value greater than or equal to 5.


11. Alloy minLength Validator

Use: This validator is used to check minimum characters.

How to use: Use attribute name=”minLength” for the tag aui:validator.

Sample Code:

  <aui:input  name="minLength" label="minLength only 5">
     <aui:validator name="minLength">5</aui:validator>
  </aui:input>
Default Error Message: Please enter at least {0} characters.

Here {0} is the place holder that will be replaced by minimum length as specified in the above code. For example “Please enter at least 5 characters.


12. Alloy number Validator

Use: This validator is used to validate a valid number. 

How to use: Use attribute name=”number” for the tag aui:validator .

Sample Code:

  <aui:input  name="number" label="Number Validator">
     <aui:validator name="number"/>
  </aui:input>
Default Error Message: Please enter a valid number.

13. Alloy range Validator

Use: This validator is used only for number to validate whether the number is in range or not. 

How to use: Use attribute name=”range” for the tag aui:validator

Sample Code:

  <aui:input  name="range" label="Range Validator 5 to 10">
     <aui:validator name="range">[5,10]</aui:validator>
  </aui:input>
Default Error Message: Please enter a value between {0} and {1}.

Here {0} and {1} are two place  holders that will be replaced by the number as mentioned in the above code. For example “Please enter a value between 5 and 10.


14. Alloy rangeLength Validator

Use: This validator is used to validate number of characters in given range. 

How to use: Use attribute name=”rangeLength” for the tag aui:validator

Sample Code:

  <aui:input  name="rangeLength" label="RangeLength Validator 5 to 10">
     <aui:validator name="rangeLength">[5,10]</aui:validator>
  </aui:input>
Default Error Message: Please enter a value between {0} and {1} characters long.

Here {0} and {1} are two place  holders that will be replaced by the number as mentioned in the above code. For example “Please enter a value between 5 and 10 characters long.


15. Alloy required Validator

Use: This validator is used to validate mandatory fields.

How to use: Use attribute name=”required” for the tag aui:validator

Sample Code:

  <aui:input  name="required" label="Required Field Validation">
     <aui:validator name="required"/>
  </aui:input>
Default Error Message: This field is required.

16. Alloy url Validator

Use: If you need to validate valid url use this validator.

How to use: Use attribute name=”url” for the tag aui:validator

Sample Code:

   <aui:input  name="url" label="URL Validator">
     <aui:validator name="url"/>
  </aui:input>
Default Error Message: Please enter a valid URL.

Do yourself: Copy and past the below code in your JSP page. Try check the different validators.

<%@ taglib uri="http://java.sun.com/portlet_2_0" prefix="portlet"%>
<%@ taglib uri="http://liferay.com/tld/theme" prefix="theme"%>
<%@ taglib uri="http://liferay.com/tld/aui" prefix="aui" %>
<portlet:defineObjects />
<theme:defineObjects />
<aui:form name="fm"> 

  <aui:input  name="acceptFiles" type="file" label="AcceptFiles Validator">
     <aui:validator name="acceptFiles">'pdf,png'</aui:validator>
  </aui:input>
 
  <aui:input  name="alpha" label="Alpha Validator">
     <aui:validator name="alpha"/>
  </aui:input>
 
  <aui:input  name="alphanum" label="Alphanum Validator">
     <aui:validator name="alphanum"/>
  </aui:input>
 
  <aui:input  name="date" label="Date Validator">
     <aui:validator name="date"/>
  </aui:input>
 
  <aui:input  name="digits" label="Digits Validator">
     <aui:validator name="digits"/>
  </aui:input>
 
  <aui:input  name="email" label="Email Validator">
     <aui:validator name="email"/>
  </aui:input>
 
  <aui:input  name="permanentAddress" id="permanentAddress" label="Permanent Address">
     <aui:validator name="required"/>
  </aui:input>
 
  <aui:input  name="temAddress" label="Temporary Address">
    <aui:validator name="equalTo">'#<portlet:namespace />permanentAddress'</aui:validator>
  </aui:input>
 
  <aui:input  name="max" label="Maximum 100">
     <aui:validator name="max">100</aui:validator>
  </aui:input>
 
  <aui:input  name="maxLength" label="maxLength only 5">
     <aui:validator name="maxLength">5</aui:validator>
  </aui:input>
 
  <aui:input  name="min" label="Min 5">
     <aui:validator name="min">5</aui:validator>
  </aui:input>
 
  <aui:input  name="minLength" label="minLength only 5">
     <aui:validator name="minLength">5</aui:validator>
  </aui:input>
 
  <aui:input  name="number" label="Number Validator">
     <aui:validator name="number"/>
  </aui:input>
 
  <aui:input  name="range" label="Range Validator 5 to 10">
     <aui:validator name="range">[5,10]</aui:validator>
  </aui:input>
 
  <aui:input  name="rangeLength" label="RangeLength Validator 5 to 10">
     <aui:validator name="rangeLength">[5,10]</aui:validator>
  </aui:input>
 
  <aui:input  name="required" label="Required Field Validation">
     <aui:validator name="required"/>
  </aui:input>
 
  <aui:input  name="url" label="URL Validator">
     <aui:validator name="url"/>
  </aui:input>

      
  <aui:button type="submit" value="Submit"/>
</aui:form>

Conclusion: Here in this article only Alloy default validators are used. In fact you can use your own custom validation rules. The custom validation will be explained in another article.

Exit mobile version