How to validate client-side in EJ2 JavaScript DatePicker

4 Sep 20263 minutes to read

Client-side validation in the DatePicker component is achieved by using the Essential® JavaScript 2 FormValidator. It provides an option to customize the feedback error messages for the corresponding fields to take action to resolve the issue.

In the example below, the required field validation is implemented by mapping the name attribute value to the rules property. It validates the DatePicker component and displays the validation message when the textbox value is empty during form post back or focus out.

var datepicker = new ej.calendars.DatePicker({
        placeholder: 'Choose a date',
         // sets the value
        value: new Date()
    });

    var options = {
    rules: {
        'datevalue': { required: true }
    },
    customPlacement: function (inputElement, errorElement) {
        //to place the error message in custom position.
        inputElement.parentElement.parentElement.appendChild(errorElement);
    }
};

    var formObject = new ej.inputs.FormValidator('#form-element', options);
    datepicker.appendTo('#element');
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 DatePicker control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/34.2.2/ej2-calendars/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/34.2.2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <form id="form-element" class="form-vertical">
            <div class="form-group">
                <div class="col-sm-6">
                    <input type="text" id="element" name="datevalue" class="form-control">
                </div>
            </div>
        </form>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>