如何将剑道验证器消息跨度元素放在正在验证的输入下方？答案

【问题标题】：How to put kendo validator message span element underneath the input being validated?如何将剑道验证器消息跨度元素放在正在验证的输入下方？
【发布时间】：2017-05-03 15:02:31
【问题描述】：

我正在尝试解决这个问题一段时间。我看到的所有示例，使用 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 中收到正确的消息。不过这个span部分修改了页面的布局：

我该如何解决这个问题，所以我的error span 被放置在我的表单下方，就像这里的一些示例中显示的那样：http://dojo.telerik.com/ikUfu:

【问题讨论】：

标签： asp.net-mvc telerik html.beginform kendo-validator

【解决方案1】：

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

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

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

【讨论】：

【解决方案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>

【讨论】：