2017-05-03 185 views
0

我試圖弄清楚這一點。 所有我看到的例子中,使用手動插入如何將kendo驗證器消息span元素置於被驗證的輸入下方?

htmlinputspan元件我有以下代碼產生形式和其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> 
    } 

當產生形式,我有在網頁下面的代碼:

enter image description here

這是一個驗證:

<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正確的消息。然而,這種跨部修改了頁面的佈局:enter image description here

我怎樣才能解決這個問題,所以我error span放在我的形式,它是像這裏的一些例子中的顯示方式下:http://dojo.telerik.com/ikUfuenter image description here

回答

0

我有完全相同的問題。問題似乎是驗證消息span元素在DatePickers的錯誤位置。正是這種元素中:

但是,在所有其他窗口小部件,它的垃圾郵件元素的一個水平內:

所以,看來這是目前在Telerik的一個bug。它適用於其他小部件,但不適用於DatePicker。我會看到並發現這個bug是否已經被報告,如果沒有,就報告它。如果你迫切需要它儘快修復,我假設你可以嘗試一些jquery魔法來移動span元素。