Requirement: I have an Interactive Grid with an Email Address column. Now, I have a requirement where as soon as the User enters the Email Address and move out of the cell, it should fire Email Validation immediately, and should highlight the invalid Email Address immediately as shown below:

Solution: For solution of the above requirement follow the steps as shown below:

Step 1: Go to the Page > Select the Interactive Grid (Email Validation inside IG) > Expand Columns and Select EMAIL_ADDRESS > Set Custom Attributes as pattern=”[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$” data-valid-message=”Invalid email address” > Click Save button.

In case we want to change the Regular Expression based on our Custom Email Validation logic, we can simply change the Regular Expression.

Step 2: Thus, when we run the Application we will get the below screen. Of course, this may be different based on your data.

Now, we will provide the Email Address for the first row as susanto@gmail.com and will move out of the cell. This will not throw any error as the Email Address provided is a valid Email Address.

But, when we provided the Email Address as moumita and tried to move out of that cell, immediately it throws Email Address Validation error, and it also highlighted the row as shown below.

Similarly, for the third row where Email Address is shivansh@gmail will not throw error, whereas for the fourth row where the Email Address is anjali@ throws Email Address Validation error, and it also highlighted the row as shown below.

Hence, the solution to our requirement.

If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.

Thanks & Regards,
Susanto Paul

 1,496 total views,  10 views today