jquery - 使用 span 和类，MVC 框架在 jQuery 中进行基于 Kendo 模型的验证

Question

我正在使用 Razor MVC 和模型绑定(bind)来强制执行验证限制，例如 StringLength(因此他们输入的文本不会超过我的数据库字段长度)，例如:

@Html.EditorFor(model => model.LastName) <br/>
<span class="errorText" style="right:50px;top:100px">
    @Html.ValidationMessageFor(model => model.LastName)
</span>

并且该跨度使用 errorText 控制消息的格式类:

<style type="text/css">
    .errorText {
         background-color: red;
         border: 2px solid black;
         margin: 2px;
         color: white;
         font-size: 13px;
         position: absolute;
         z-index: 100;
    }
</style>

我通过其 top 控制验证消息出现的位置和 right跨度上的属性。

问题是如果这些 span 没有文本，它们将在页面上显示小黑 block ，我想隐藏它们，除非需要显示消息。有没有办法隐藏跨度，直到需要出现一条消息，然后再显示它们？然后在条件清除时再次隐藏它们？

尝试过

.on('change', function() { ... } )

看看它是否会触发

    $('[class="errorText"]').each(function() {
        $(this).bind('blur', function() {
            $(this).css('border','0px');
        });
    }

change和 blur事件不会被调用，因为跨度永远不会聚焦或模糊。我看到网站说要做 .removeClass() (去掉错误文本)和.addClass() (用 display:none 上课)，但是当我无法绑定(bind)到事件时我该怎么做？还有别的办法吗？我是否只是反复检查他们的跨度 .html() ？我在这个页面上有很多字段，所以它看起来太占用内存了，我正在寻找替代方案。

Answer 1

所以我想出了如何从另一个相关线程做到这一点: jQuery Validation on entire page

呈现的 HTML 看起来像这样:

<INPUT id=LastName class=k-textbox value=asdf type=text name=LastName data-val="true" data-val-length-max="50" data-val-length="The field Last Name must be a string with a maximum length of 50."><BR>
<SPAN style="TOP:100px;RIGHT:50px" class="errorText">
    <SPAN class="field-validation-valid" data-valmsg-replace="true" data-valmsg-for="LastName"></SPAN>
</SPAN>

我能够通过首先删除边框和后来添加的填充到 0px 来利用该 HTML，并且由于下面函数中的“元素”是上面的“INPUT”，我这样做是为了改变验证消息跨度:

$(document).ready(function() {
    $('[class="errorText"]').css("border", "0px solid white").padding("0px");
});

$.validator.setDefaults({
    errorContainer: "#field-validation-valid",
    highlight: function (element, errorText) {
        $(element).parent().children(1).children(0).css("border", "3px solid black").padding("5px");
    },
    unhighlight: function (element, errorText) {
        $(element).parent().children(1).children(0).css("border", "0px solid white").padding("0px");
    }
});

然后我稍微更改了 CSS:

<style type="text/css">
    .errorText {
         font-size: 13px;
         color: white;
         height: 27px;
         margin: 2px;
         background-color: red;
         position: absolute;
         z-index: 100;
    }
</style>

我从类中删除了边框和内边距，因为无论如何它都将使用 jQuery 验证器“突出显示”和“取消突出显示”事件即时应用和删除。