How to use jQuery Validation in JavaScript Editor Type control?

The jQuery validate plugin makes simple clientside form validation easy while still offering plenty of customization options. The plugin comes with a useful set of validation methods including URL and email validation, while providing an API to write your own methods to validate the form element.

Use JQuery validation

The jQuery validate plugin rules and custom methods can be used in the editor type control with the help of two properties, the validationRules and the validationMessage. The validationRules property is used to define the jQuery validate rules for the control and validationMessage is used to define the respective error message for the rules that are specified in the validationRules property. When error message is not specified to the validation rules, it takes the default validation error message. The validationRules and validationMessage properties work within a form element, otherwise it does not work. Before using those properties, you need to add the jQuery validate plugin to your application. Syncfusion has provided the following properties to the list of control.

1. Date Picker.
2. DateTimePicker.
3. Numeric, Currency and Percentage textbox.   
4. Mask Edit Textbox. 
5. Autocomplete and Dropdown.
6. Checkbox and Radio button.

You can define the validationRules and the validationMessage properties to the control as shown in the following code:

JavaScript

<input id="date" name="datepick" type="text" />
<script type="text/javascript">
        $(function () {
            $("#date").ejDatePicker({
                validationRules: { required: true },
                validationMessage: { required: "Required Date value" }
            })
        });
     </script>    

CSHTML

@Html.EJ().DatePicker("date").ValidationRules(e=>e.AddRule("required",true)).ValidationMessage(m=>m.AddMessage("required","Required Date Value"))

You can also define the validationRules and validationMessage properties to other list of controls. 

A sample jQuery validation is available in the following location: Sample location