The AlloyUI framework integrated within Liferay provides a very powerful and flexible system for the form validation: some default validators (required, url, email, ...) are provided and you can also create custom validators with your personal application logic.

But if you want to re-use many times the same custom validator, you need to duplicate code around the application; so let's see a very interesting way to define a reusable custom validator.

Let's suppose to create a custom validator to test a mandatory Gmail address; you'll usually write something as:

<aui:input name="emailAddress" required="true">
    <aui:validator name="email" />
    <aui:validator name="custom" errorMessage="please-enter-a-valid-gmail-address">
    function (value, node) {
        if(value.endsWith('@ gmail.com'))
            return true;
        else
            return false;
    }
    </aui:validator>
</aui:input>

This code is quite simple, there are 3 different validators each with its specific behaviour:

1. required, test that the field is filled;
2. email, test that the field is a valid email;
3. custom, test that the field is a valid Gmail one.

But if we want to reuse the custom validator (imagine a more complex one) we should duplicate the code each time. Would it be much more cool if we could do something like this?

<aui:input name="emailAddress" required="true">
    <aui:validator name="email" />
    <aui:validator name="gmail" />
</aui:input>

We can do it! With only a few lines of Javascript code.

All the code I'll show to you must be global (to be reusable) so we write it inside the plugin main.js file, or inside your theme.

AUI().use('aui-form-validator', function(A) {
    var defaultFormValidator = A.config.FormValidator;

    A.mix(
        defaultFormValidator.RULES,
        {
            gmail: function (value, fieldNode, ruleValue) {
                if(undefined == value || value == null || value == '')
                    return true;

                return value.endsWith('@ gmail.com');
            },
        },
        true
    );

    A.mix(
        defaultFormValidator.STRINGS,
        {
            gmail: Liferay.Language.get('please-enter-a-valid-gmail-address')
        },
        true
    );
});

First we retrieve the instance of the FormValidator global object configuration; after that, with the mix function we are going to inject new features inside the validator.

The first invocation of the mix function is used to add to the validator rules (RULES field) a new validation feature called gmail (the name will be the one used in aui:validator taglib).

The second invocation of the mix function is used to add to the validator messages (STRINGS field) a new translation for the error message; the translation key must be defined at the portal level, so in Portal.properties file.

The third boolean parameter true of each call is only used to overwrite any existing definitions.

So let's deploy your plugin and happy validation!