Question

我试图解决这个问题一段时间。我看到的所有示例都使用手动插入html和input元素的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中收到正确的消息。但是，此跨度部分会修改页面的布局：

我该如何解决这个问题，因此我的error span位于我的表单下方，就像在这里举例说明的那样：http://dojo.telerik.com/ikUfu：

Answer 1

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

但是，在所有其他小部件中，它在垃圾邮件元素中高一级：

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

Answer 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>

如何在要验证的输入下面放置kendo验证器消息span元素？

2 个答案: