Creating Custom Validation Scripts on Web Form Portlet With DXP 7.0

This article documents how to use the custom validation script feature in the Web Form Portlet on Liferay DXP 7.0. Users might have used the same feature on Liferay Portal 6.2 and wonder which features are the same and what has changed. Please note that these instructions are for the updated Web Form app available on Liferay Marketplace. The validation feature is unfortunately not available for the existing Forms core module. 

Resolution

In Liferay Portal 6.2, by default, using a custom validation script in each field was disabled. Administrators had to enable it by creating a portlet-ext.properties file (not to be confused with portal-ext.properties) in the \..\liferay-portal-6.2-ee-sp20\tomcat-7.0.62\webapps\web-form-portlet\WEB-INF\classes folder.

Once the portal was restarted, only then was the custom validation functionality available in the Web Form portlet.

One of the advantages with DXP 7.0, is that enabling the custom validation script feature in the deployed Web Form app does not require restarting the portal. Normally, this is also disabled by default. In order to enable the custom validation scripts feature:

1. Ensure that the Web Form portlet has been properly deployed and displays in the Add Application menu on the right side.
2. Navigate to Control Panel → Configuration → System Settings → Other
3. Click web.form.service.configuration.name
4. Select the checkbox Validation script enable (located at the bottom)
   
5. Click the Update button.

At this point, custom validation scripts can be used in the Web Form portlet. No server restart required.

To demonstrate, let's assume respondents to a survey are required to provide a valid email address.

1. Navigate back to the web page where the Web Form portlet has been added.
2. Click the three vertical dots icon → Configuration
3. Click the plus sign under Name
4. Enter the following:
   • Name field: Email
   • Type drop down: Select Text
   • Validation script:

     var isEmail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     if(currentFieldValue.search (isEmail) == -1 && currentFieldValue != '') {
     return false;
     } else {
     return true;
     }
     

   • Validation Error Message: Valid Email Required
5. Click the Save button
6. Close the Configuration window
7. Verify the Email field displays on the portlet
8. Try submitting the form with an invalid email address. The custom validation message Valid Email Required will display.
   

Figure 3 shows the validation message is displayed when the user entered an incomplete email address.

Additional Information

Please note, the way property is displayed—web.form.service.configuration.name—is a known issue because of the language key. It will be fixed in a future version of the Web Form app.

Utilizing the Validation Feature Within the Web Form Portlet