0

我试图解决这个问题一段时间。我看到的所有示例，都使用手动插入的htmlwithinput和span元素

我有以下代码动态生成表单及其datepicker元素：

@using (Html.BeginForm("Reload", "FileDate", FormMethod.Post, new { returnUrl = this.Request.RawUrl, id = "DateForm", onsubmit = "return ValidateDate();" } ))
{
     @(Html.Kendo().DatePicker()
        .Name("Date")
        .Value(Session["FileDate"] == null ? DateTime.Now : Convert.ToDateTime(Session["FileDate"].ToString()))
        .Events(e => e
               .Change("datepicker_change")
        )
     )
     @Html.Hidden("returnUrl", this.Request.RawUrl)

     <script>
          function datepicker_change() {
                if(ValidateDate()){
                     $("#DateForm").submit();
                }
          }
     </script>
  }

生成表单时，我在页面上有以下代码：

在此处输入图像描述

这是一个验证：

<script>
        $(document).ready(function() {
            $("#mainMenu").kendoMenu();
            $("#Date").attr('required', 'required');
            $("#Date").attr('data-WrongFormat-msg', 'Date Format is Wrong');
            var validator = $("#container").kendoValidator({
                    rules: {
                    WrongFormat: function (input) {
                        if (input.is("[data-role=datepicker]")) {
                            var dateBox = input.data("kendoDatePicker");
                            return input.data("kendoDatePicker").value();
                        } else {
                            return true;
                        }
                    }
                }
            })
        });
        function ValidateDate()
        {
            var validator = $("#container").data("kendoValidator");
            if (validator.validate()) {
                return true;
            }
            else
            {
                return false;
            }
        }
</script>

当我提供不正确的输入或根本没有输入时，我会在span. 但是，这个 span 部分修改了页面的布局：在此处输入图像描述

我该如何解决这个问题，所以我error span被放在我的表单下面，就像这里的一些例子中显示的那样： http: //dojo.telerik.com/ikUfu：在此处输入图像描述

4

2 回答 2

0

我有完全相同的问题。问题似乎是验证消息跨度元素位于 DatePickers 的错误位置。它在这个元素里面：

但是，在所有其他小部件中，它位于 spam 元素中的上一级：

所以，目前这似乎是 Telerik 中的一个错误。它适用于其他小部件，但不适用于 DatePicker。我会查看并查找是否已报告此错误，如果没有，请报告。如果您迫切需要尽快修复它，我假设您可以尝试一些 jquery 魔术来移动 span 元素。

于 2017-05-09T14:08:00.227 回答
0

我也遇到过。这个问题有什么合适的解决方案吗？

简而言之，我的解决方法：

  1. 删除所有可能的旧错误消息

  2. 将新的移动到正确的 HTML 容器中

    <div id="div_id">
    <input id="input_id" type="text">
</div>

<script>    
    var validatable = $("[id='input_id'").kendoValidator({
      rules: {
        minimumLengthRule: function (input) {
          var trimmedInputValue = $.trim(input.val());
          return trimmedInputValue.length > 0 ;
        }
      },
      messages: {
        minimumLengthRule: "The input length is too short."
      }
    }).data("kendoValidator");

    validatable.bind("validateInput", function (e) {
      $("#div_id > span").not(':first').remove();                       // 1.
      if (!e.valid) {
          $("[id='input_id_validationMessage'").appendTo('#div_id');    // 2.
      }
    });
</script>
于 2020-09-08T16:42:44.757 回答