html - 使用 html5 和 kendo ui 显示错误消息

Question

我正在使用 html5 和 css3 并陷入一种状态。条件是在按钮不是文本框之后“单击按钮时应显示警告消息”。它看起来很简单，但是当我完成编码时，我得到了以下输出。

但它应该在扫描按钮后显示。有人可以帮助我吗？

这是我的编码。

.aspx

<label class="moblblText">Moveable Unit / Location:</label>                     
                    <input type="text" id="txtunitId" runat="server" class="k-textbox" style="width:120px" name="search" maxlength="11" required validationMessage="Please Enter Digits"/>
                 <button  class="loginBtn" style="width:150px" runat="server" TabIndex="0"  ID="btnScan">Scan</button> 
                  <li class="status">
                </li>

.js

<script type="text/javascript">
    $(document).ready(function () {
        var validator = $("#txtunitId").kendoValidator().data("kendoValidator"),

       status = $(".status");

        $("button").click(function () {
            if (validator.validate()) {

            } else {

            }
        });
    });
</script>

Answer 1

<label class="moblblText" style="float:left;">Moveable Unit / Location:</label>
<input type="text" id="txtunitId" runat="server" class="k-textbox" style="width:120px;float:left;" name="search" maxlength="11" required validationMessage="Please Enter Digits" />
<button class="loginBtn" style="width:150px;float:left;" runat="server" TabIndex="0" ID="btnScan">Scan</button>



var validator = $("#txtunitId").kendoValidator().data("kendoValidator"),
    status = $(".status");

$('#txtunitId').focusout(function(){
  $("#txtunitId").next().find("span").css("float", "right");

});

$("button").click(function () {
    if (validator.validate()){

    } else {

    }
});

http://jsfiddle.net/Ft2Xa/3/

Answer 2

这不一定能解决您的问题，但您的 HTML 格式不正确：

<input ...maxlength="11" required validationMessage=<\n> "Please Enter Digits"/>

应该是：

<input ...maxlength="11" required validationMessage="Please Enter Digits"/>