Edit this page

Validate If Value Is in the Correct Format

Environment

Product Progress Kendo UI DatePicker Progress Kendo UI DateTimePicker
Progress Kendo UI version Tested up to version 2017.3.1026

 

Description

How can I validate whether the input of the user in the DatePicker is in the correct format?

Solution

Use the Kendo UI Validator and create a custom validation rule which validates the format of the date.

    <h2>Use client-side validation:</h2>
    <form id="form">
      <input data-role="datepicker"
             name="date"
             data-bind="value: selectedDate"
             id="date"
             style="width: 20%">
      <span class="k-invalid-msg" data-for="date"></span>
    </form>

    <script>


      $(function () {

        var viewModel = kendo.observable({
          selectedDate: new Date(),

        });
        kendo.bind($("#form"), viewModel);


        $("#form").kendoValidator({
          rules: {
            //implement your custom date validation
            dateValidation: function (input, params) {

              if (input.is("[name='date']") && input.val() != "") {
                input.attr("data-datevalidation-msg", "Not a valid date in MM/dd/yyyy format!");

                var date = kendo.parseDate(input.val(), "MM/dd/yyyy");
                if (date) {
                  return true;
                }
                return false;
              }
              return true;                    
            }
          },
          messages: { //custom rules messages
            datevalidation: function (input) {
              // return the message text
              return input.attr("data-val-datevalidation");
            }
          }
        });
      })
    </script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy