• Alloy Form Validation Part 1

    Posted on October 8, 2014 by Hamidul Islam in Liferay.

    alloy form validation


    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>
    


    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>
    


    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>
    


    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>
    


    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>
    


    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>
    

    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>
    

    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>
    

    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>
    

    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>
    

    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>
    


    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>
    

    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>
    

    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>
    


    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>
    


    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.

    Post Tagged with , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you human? * Time limit is exhausted. Please reload CAPTCHA.

Top
%d bloggers like this:

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close