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.