Kendo validation for kendo picker message not removing when is correct?

[ting]

Hi i needed some help as my kendo picker not able to clear the error message when the date format is correct

        $(function () {
     
                 var viewModel = kendo.observable({
                     selectedDate: new Date(),
     
                 });
                 kendo.bind($("#change-date-collection1"), viewModel)
     
                 $("#change-date-collection1").kendoValidator({
                     rules: {
                         // Implement your custom date validation.
                         dateValidation: function (input, params) {
     
                             if (input.is("[name='date']") && input.val() != "") {
                                 
                                 var date = kendo.parseDate(input.val(), "dd/MM/yyyy");
                                 if (date) {
                                     return true;
                                  
                                 }
                                 return false;  
                                 
                             }
                             return true;
                         }
                     },
                     messages: { //custom rules messages
                             // Return the message text.
                            dateValidation: "Not a valid date in dd/MM/YYYY format!",
                     }
                 });
             })

I want the messages to be remove or hide when it is correct but somehow i not able to 

[Patrick | Technical Support Engineer, Senior]

Hi Ting,

Based on the information provided, I have created an example for you as a comparison which demonstrates the Kendo UI DatePicker validating input by the Kendo UI Validator.  The Kendo UI DatePicker contains the format of "dd/MM/yyyy" to allow for the selection in the calendar to match the input.

Html

    <div id="example">
      <div class="demo-section k-content wide">
        <div>
          <form>
            <ul id="fieldlist">
              <li>            
                <h4>Choose a date</h4>
                <input id ="myDatePicker" 
                       name="myDatePicker"
                       data-role="datepicker"
                       data-bind="value: selectedDate"
                       data-format="dd/MM/yyyy"
                       required
                       style="width: 100%" />

                <span data-for="myDatePicker" class="k-invalid-msg"></span>

              </li>
            </ul>

            <button data-bind="click: submit" class="k-button k-primary">Submit</button>
          </form>
        </div>
      </div>

Upon pressing the submit button, the validation will fire and check if the formatting is allowed.  The rules and messages match and a custom invalid error message will appear if the validation does not clear.  Additionally, the validation will be disabled upon blur.

JavaScript

        var kendoValidator;

        $(document).ready(function() {
          var viewModel = kendo.observable({
            selectedDate: null,
            submit: function(e) {
              e.preventDefault();

              if (kendoValidator.validate()) {
                kendo.alert("All Set!");
              }
            },
          });

          kendo.bind($("#example"), viewModel);

          $("form").kendoValidator({
            validateOnBlur: false, // Disable the default validation on blur

            rules: {
              dateValidation:  function (input, params) {

                if (input.is("[name=myDatePicker]") && input.val() != "") {
                  //checks if it is a valid date
                  var date = kendo.parseDate(input.val(), "dd/MM/yyyy");

                  if (date) {
                    return true;

                  }
                  return false;  

                }
                return true;
              }
            },
            messages: { //custom rules messages

              // Return the message text.
              dateValidation: "Not a valid date in dd/MM/YYYY format!",
            }
          });

          // Get the Validator instance.
          kendoValidator = $("form").getKendoValidator();
        });

 

Please take a look at the following Progress Kendo UI Dojo which demonstrates the above and removes the message when a valid input is provided.  Please let me know if you have any questions.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik