简体   繁体   English

Kendo UI验证-禁用/启用

[英]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) 方案1(工作)

User doesnt enter dates, Validaion not needed 用户没有输入日期,不需要验证

scenario 2(working) 方案2(工作)

User enters a start or end date. 用户输入开始或结束日期。 This will validate the text boxes. 这将验证文本框。

scenario 3(NOT WORKING) 方案3(不工作)

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! 提前致谢!

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. Mine仅验证是否输入了日期,并且如果日期选择器字段为空,则将对剑道隐藏所有验证标签。

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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM