How to validate EJ form controls using JQuery validate plugin
JQuery validate plugin is used to validate form controls. We can use this plugin to validate EJ Form controls also. The EJ form controls are listed below.
The validation procedure to validate the EJ form controls is same like validating any other HTML elements using JQuery validate plugin. Only thing we additionally need to do is empty the “ignore” property in the “validate” handler.
From the following steps you can learn how to achieve validation in EJ form controls using JQuery validate plugin.
Step 1: Include the JQuery Library and JQuery validation plugin
To use JQuery validation, we need to refer the script file ‘jquery.validate’ in our page. Along with these script file, include the Scripts and CSS files needed to render our EJ components as shown below.
<head> <!--Contains the neccessary theme for our componets--> <link href="themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" /> <!--dependency script files--> <script src="scripts/jquery-1.10.2.min.js"></script> <script src="scripts/jquery.easing.1.3.js"></script> <script src="scripts/jquery.globalize.js"></script> <!—for JQuery validation--> <script src="scripts/jquery.validate.min.js"></script> <!--contains the necessary scripts to render all the web components--> <script src="scripts/ej.web.all.min.js"></script> </head>
Step 2: Create your Form by adding HTML
Add the necessary elements needed for your Form. We will convert it to EJ components in the later steps.
For JQuery Validate plugin to work we need to specify the ‘name’ attribute in the elements. In EJ Form components, if we didn’t specify the ‘name’ attribute means, the ‘name’ attribute will be set to the element automatically. The ‘id’ specified for the element will be taken as value for the ‘name’ attribute. The following code snippet showcases the initialization of the element within the <form> tag.
In the <script> section declare the EJ components as shown below.
Step 3: When the DOM has loaded, attach the ‘valiadate’ method to the Form
In the document ready function, specify the validation messages and validation rules inside the ‘validate’ handler bounded for the Form.
There are many inbuilt methods available within the JQuery.Validate plugin. The simplest way to validate your Form is to use the Validate() method like $("Form ID").validate();. It will validate your Form before submitting it. We can also specify our own validation rules and validation messages for the Form elements.
Step 4: Specify the Validation rules and messages in the ‘Validate’ method
We need to specify the validation rules for the elements, by specifying the ‘name’ of the corresponding element and mentioning it as ‘required’. Similarly we need to specify the validation message using the ‘name’ of the element.
We can also specify the target, where the error messages needs to be displayed if the validation fails. Also it is possible to specify custom rules for validating an element.
Please refer the below code,
You can learn more about the specified options and the list of other options available in JQuery validation, from its official documentation. Link for the same is provided below.
As you can see in the above code snippet, we have emptied the ‘ignore’ variable. If an element is in hidden state JQuery validate will not consider that element and it will not validate it. In some of our form component (like Dropdownlist) we maintain two input elements, the “name” attribute will be maintained in the hidden element so we need to specify ‘ignore’ as . Then only JQuery validation works for those components.
Output of the sample
We have also attached sample for reference
We have provided inbuilt client side validation support for our EJ Form components. Our Form components we have provided two API’s “validationMessages” and “validationRules” for validation purpose. You can refer the following class reference link to know about how to use these properties.
This page will automatically be redirected to the sign-in page in 10 seconds.