javascriptjqueryvalidationkendo-uikendo-validator

Kendo UI validation - disable/enable


I'm trying to disable and enable validation depending on the user selection. On my solution i would like to only validate if the user enters a start or end date. So far if you look at part of my solution code i have some of the validation working. I will put down a couple of scenario on how i need it to work.

scenario 1(working)

User doesnt enter dates, Validaion not needed

scenario 2(working)

User enters a start or end date. This will validate the text boxes.

scenario 3(NOT WORKING)

User enters start and end date. Click Search. Then Clear both date fields and validation is how showning for these two text boxes. I wish to have the validation hidden at this point. The only way i can do this so far is by clearing the text boxes then hitting search again.

Thanks in advance!


Solution

  • See this link

    Mine only validates if a date has been entered and will hide all validation labels from kendo if the date picker field is empty.

    It satisfies your scenarios described above except mine posts the form on success.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>Kendo UI Snippet</title>
    
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.common.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.rtl.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.dataviz.default.min.css">
        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1119/styles/kendo.mobile.all.min.css">
    
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.3.1119/js/kendo.all.min.js"></script>
    </head>
    <body>
    
    <form id="myform">
        <input name="myDate" class="validateDate" id="startDate" /> <br />
        <input name="myDate" class="validateDate" id="endDate" />
        <button>Validate</button>
    </form>
    
    <script>
        $("#myform").kendoValidator({
          rules: {
            dateValidation: function(input) {
              //only validate
              if (input.hasClass('validateDate')) {
                if(input.val() !== ""){
                    return kendo.parseDate(input.val(), "dd/MM/yyyy");  
                }
                else{
                  input.siblings("span.k-tooltip-validation").hide(); 
                    return true; 
                }
              }
            }
          },
          messages: {
            dateValidation: "Please enter a date in the format dd/mm/yyyy"
          }
        });
      $("#startDate, #endDate").kendoDatePicker({ format: "dd/MM/yyyy", culture: "en-GB" })
    </script>
    </body>
    </html>