Building Forms with AUI Tags

The AUI tag library provides all the components you need to build forms for your applications. AUI tags provide many benefits to standard form elements, such as custom namespacing, localization, and even validation. They provide multiple attributes that let you create the experience you want for your users.

This tutorial shows you how to build forms using AUI tags. Follow these steps to build a form:

  1. Add the aui taglib declaration to your portlet’s view.jsp if you haven’t already:

    <%@ taglib prefix="aui" uri="http://liferay.com/tld/aui" %>
    
  2. Build your form using the tags shown below. Each tag links to the corresponding taglibdoc that list the available attributes:

    An example form is shown below:

    <aui:form name="fm">
    	<aui:fieldset-group markupView="lexicon">
    		<aui:fieldset label="Personal Information">
    			<aui:row>
    				<aui:col width="50">
    					<aui:input label="First Name" name="firstName" type="text" />
    				</aui:col>
    				<aui:col width="50">
    					<aui:input label="Last Name" name="lastName" type="text" />
    				</aui:col>
    			</aui:row>
    			<aui:row>
    				<aui:col width="50">
    					<aui:input label="Username" name="username" type="text" />
    				</aui:col>
    				<aui:col width="50">
    					<aui:input label="Email" name="email" type="email" />
    				</aui:col>
    			</aui:row>
    		</aui:fieldset>
    	</aui:fieldset-group>
    	<aui:fieldset-group markupView="lexicon">
    		<aui:fieldset label="Miscellaneous">
    			<aui:input label="Hobbies" name="hobbies" type="textarea" />
    			<aui:input label="Receive email updates" name="emailUpdates" type="checkbox" />
    		</aui:fieldset>
    	</aui:fieldset-group>
    	<aui:button-row>
    		<aui:button name="submitButton" type="submit" value="Submit" />
    	</aui:button-row>
    </aui:form>
    

    Figure 1: The AUI tags provide everything you need to build forms for your applications.

    Figure 1: The AUI tags provide everything you need to build forms for your applications.

  3. Optionally add validation to your form fields. Nest a <aui:validator> tag inside each form field that you want to validate. Specify the validation rule with the <aui:validator> tag’s name attribute (The available validation rules are shown in the table below). You can override a field’s default validation error message with the errorMessage attribute. An example configuration is shown below:

    <aui:form name="myForm">
        <aui:input name="password" id="password" label="Password" 
        required="true" />
        <aui:input name="confirmPassword" id="password" 
        label="Confirm Password" required="true">
            <aui:validator name="equalTo" 
            errorMessage="The passwords much match. Please try again." >
            '#<portlet:namespace>password'
            </aui:validator>
        </aui:input>
    </aui:form>
    

    Figure 2: The AUI tags also provide validation for form fields.

    Figure 2: The AUI tags also provide validation for form fields.

    The full list of available validation rules is shown in the table below:

    RuleDescriptionDefault Error Message
    acceptFilesSpecifies that the field can only contain the file types given. Each file extension must be separated by a comma. For example
    <aui:validator name="acceptFiles">'jpg,png,tif,gif'</aui:validator>
    ‘Please enter a file with a valid extension ([supported extensions]).’
    alphaPermits alphabetic characters‘Please enter only alpha characters.’
    alphanumPermits alphanumeric characters‘Please enter only alphanumeric characters.’
    datePermits dates‘Please enter a valid date.’
    digitsPermits digits‘Please enter only digits.’
    emailPermits an email address‘Please enter a valid email address.’
    equalToPermits contents equal to another field with the specified field ID. For example,
    <aui:validator name="equalTo">'#<portlet:namespace/>password'</aui:validator>
    ‘Please enter the same value again.’
    maxPermits an integer value less than the specified value. For example, a max value of 20 is specified with
    <aui:validator name="max">20</aui:validator>
    ‘Please enter a value less than or equal to [max value].’
    maxLengthPermits a maximum field length of the specified size (follows the same syntax as max)‘Please enter no more than [max] characters.’
    minPermits an integer value greater than the specified minimum value (follows the same syntax as max)‘Please enter a value greater than or equal to [min value].’
    minLengthPermits a field length longer than the specified size (follows the same syntax as max).‘Please enter at least [min] characters.’
    numberPermits numerical values‘Please enter a valid number.’
    rangePermits a number between the specified range. For example, a range between 1.23 and 10 is specified here
    <aui:validator name="range">[1.23,10]</aui:validator>
    ‘Please enter a value between [0] and [1].’
    rangeLengthPermits a field length between the specified range (follows the same syntax as range)‘Please enter a value between [0] and [1] characters long.’
    requiredPrevents a blank field‘This field is required.’
    urlPermits a URL value‘Please enter a valid URL.’

Now you know how to build user-friendly forms for your applications.

Using the Chart Taglib in Your Portlets

Using Liferay Front-end Taglibs in Your Portlet

Using the Clay Taglib in Your portlets

« Using AUI TaglibsIntroduction to Mobile »
Was this article helpful?
0 out of 0 found this helpful