AlloyUI Custom Validation in DXP

AUI Input Field Custom Validation

Offlate, i have been working on some serious devolopment using Liferay 7 DXP. Having delivered close to half a dozen corporate training programs on Liferay 7 DXP it is time for me to get my hands wet on implementing some of the cool features of Liferay the DXP way. I thought it is a good idea to share my tricks and tips through these blogs so that it can he of help to someone that would like to implement similar stuff in their Liferay 7 implementations.

Introduction:

In one of the projects that i am involved, we are developing a very simple custom user registration portlet. The registration form will take only three fields - Email Address, First Name and Last Name. On the other side we have Implemented an MVCActionCommand to create an user using API's of UserLocalServiceUtil. One of the requirements is to do a front-end validation to check if an user with the same email address already exists. If so, the form should not get subitted at all.

Here is the snapshot of the Create Account Portlet with the error message shown.

 

Frontend Code:

Here is the code that we wrote on the view.jsp of this portlet. See, in this code, how a porltet resource request is invoked programmatically inside the custom <aui:validator> block. One good thing about Liferay 7 DXP is the jQuery libraries are included by default unlike the earlier versions of Liferay.

 

MVCResourceCommand:

We have implemented an OSGI component corresponding to the Resource Request and mapped with the particular resourceId.

 

Conclusion:

This way of invoking a portlet URL through Javascript is really powerful and the same has been invoked from the AUI validator script. Feel free to make use of this code in your projects. In case of any feedback or suggestions feel free to get in touch with me.

Thank you for reading this blog!!

Ahamed Hasan