Liferay 6.2: Form validator

Vietnam version

Data validation is a necessary work to ensure the smooth of our applications. Fortunately, Liferay Framework has provided a powerful tool for us to do this work. This post will introduce and guide the way to validate data. Let's read it:

Classification

Firstly, we will category the type of data which will be validated. In my view, I will split it into three categories. They are String, Number, and File type.

String type

Usually, we will use textbox and textarea tag to enter string data. So, what are the type of validation on String type?

• Allows empty or not
• The range (minimum and maximum length)
• Is the special string (email, url or date,...)
• Contains alpha or digits
• Constraints with another field (password, email confirmation,...)

Number type

For number type, we have to care the following conditions:

• Allows empty or not 
• The value range(minimum and maximum)
• Is integer or real number

File type

The last data type is file type. For this type, we only consider whether this file is the necessary file or not. This validation depends on the extension of the file (for examples: we only accept the files like *.png, *.jpg, *.bmp,...).

aui:validator Tag

This tag is a validating tool which is provided by Liferay Framework. It contains two attributes:

• name attribute:  this attribute is required. Its value depends on the category of validation. The acceptable values are:
• acceptFiles: the acceptable files (apply for file type). The default error message is "Please enter a value with a valid extension."
• alpha: allow only enter the alpha character (a-z,A-Z), it does not accept the digits (0-9)(apply for string type). The default error message is "Please enter only alpha characters."
• alphanum: accept alphas (a-z,A-Z) and digits (0-9) (apply to string type). The default error message is "This will accept alphabets and numbers"
• date: allow enter date or time, it means that it only accepts the digits and some special characters like / (slash), : (colon), - (dash),... The default error message is "Please enter a valid date."
• digits: you only input the unsigned integer. "Please enter only digits." is the default error message
• email: whether a string is an email address or not: The default error message is "Please enter a valid email address."
• equalTo: whether the value of a tag equals to another one or not (for examples: checking password field equals to confirmation field or not): If there is an error, the message is "Please enter the same value again."
• iri: internationalized resource identifier, extend from URL.
• max: the maximum value. The default error message "Please enter a value less than or equal to X"
• min: the minimum value: The default error message is "Please enter a value greater than or equal to X"
• maxLength: the maximum length of a field. The default error message is "Please enter no more than X  characters"
• minLength: the minimum length of a field. The default error message is "Please enter at least X characters."
• number: allow enter a number (integer or real number). The default error message is "Please enter a valid number."
• required: this field can not empty. "This field is required." is the default error message.
• url: whether a string is URL or not and the default error message is "Please enter a valid URL."
• errorMessage attribute: it is an unrequired attribute, if you want a custom message, you will assign your message to this attribute. Otherwise, the default message will be used.

The examples

Depend on the above classifying, I will provide the examples for each case.

String type

Empty

We will validate a field whether have been entered a value or not. The allow snippet will confirm if a field is empty before the data will be sent to the server:

<aui:input name="fullname">
    <aui:validator name="required" errorMessage="error-message" ></aui:validator>
</aui:input>

As you can see, we will use <aui:validator /> tag with name="required" attribute. It means that the fullname field will be checked empty before sending to the server. Otherwise, an error message will be showed. Its content is the value of errorMessage attribute or a default error message if you do not declare this attribute.

The length of string

To ensure the length of a string is valid, we have to validate before sending. The validation will be done as follows:

<aui:input name="code">
    <aui:validator name="minLenght" >8</aui:validator>
    <aui:validator name="maxLenght" >50</aui:validator>
</aui:input>

Now, we only enter the string which has length in range from 8 to 50. You can use maximum and minimum length validation depend on your problems.

Special string

The frequency special strings are email address, url, date,... We have to validate to ensure the right of data. To validate those strings, we only add the below tags in your fields:

    <aui:validator name="email" ></aui:validator>
    <aui:validator name="url" ></aui:validator>
    <aui:validator name="date" ></aui:validator>

Not contain special characters

To ensure the fields do not contain the special characters as @, #, $, ... we have to use <aui:validator /> tag whose name attribute's value is alpha or alphanum. Both allows entering the normal characters (a-z, A-Z and 0-9).

    <aui:validator name="alpha" ></aui:validator>

    <aui:validator name="alphanum" ></aui:validator>

Constraint with another field

For example, we have to check the equality of two fields. Specifically, we will check where the values of password and repassword field are the same or not? Let's see the below snippet:

<aui:input name="password" id="password"  label="Password">
    <aui:validator name="required""></aui:validator">
</aui:input">


<aui:input name="repassword" label="Re Type Password"">
    <aui:validator name="equalTo" >'#<portlet:namespace/">password'
    </aui:validator">
</aui:input">

Number types

Unsigned integer

If you only want to enter an unsigned integer, it means you want to input the digits, you have to do as:

<aui:input name="grade" label="Grade">
    <aui:validator name="digits""></aui:validator">
    <aui:validator name="min"">1</aui:validator">
    <aui:validator name="max"">12</aui:validator">
</aui:input">

As you can se, this example will allow enter an unsigned integer from 1 to 12. The value which is out of this range is not accepted.

Real number

If you want to validate a real number, let's do as the next snippet:

<aui:input name="percentOfPassedCourses" label="Percent of passed courses">
    <aui:validator name="number""></aui:validator">
    <aui:validator name="min"">0</aui:validator">
    <aui:validator name="max"">100</aui:validator">
</aui:input">

You can enter a real number whose range from 0 to 100 on bellow example. If your entered value is not a number or is out of range, a error message will be appeared.

File type

Let's see allow code:

<aui:input name="portrait" type="file">    <aui:validator name="acceptFiles">'jpg,png'</aui:validator></aui:input>

In this case, system will accept the files whose extention is jpg or png. Otherwise, a message will be appear.

Source code

I implemented a portlet about data validation (here). In my example, I created a table named Validator_Student, its content as:

CREATE TABLE Validator_Student (
StudentId LONG not null primary key, Code VARCHAR(20) null,
Fullname VARCHAR(50) null,
Gender BOOLEAN,
Birthday DATE null,
Email VARCHAR(150) null,
Address VARCHAR(255) null,
Blog VARCHAR(255) null,
Mark DOUBLE
);

We have to validate the length of  Code, Fullname, Email, Address, Blog. We also validate whether Email has email format or not and Blog has URL format or not. And the last, we need to validate the range of  Mark .field.