jQuery 中使用跨度和 class、MVC 框架的基于 Kendo 模型的验证

Question

我正在使用 Razor MVC 和模型绑定来强制执行验证限制，例如 StringLength（这样他们输入的文本不会超过我的数据库字段长度），例如：

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

并且该跨度使用 errorText class:

控制消息的格式

<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 没有文本，它们将在页面上显示小黑块，我想隐藏它们，除非需要显示消息。有没有办法隐藏跨度，直到需要出现一条消息，然后再显示它们？然后在条件清除时再次隐藏它们？

尝试过

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

看看它是否会触发并且

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

change 和 blur 事件不会被调用，因为跨度永远不会聚焦或模糊。我看到网站说要做 .removeClass()（去掉 errorText）和 .addClass()（用 display:none 加上 class），但是我该怎么做呢？ '绑定到一个事件？还有别的办法吗？我只是重复检查他们的 .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>

我能够利用 HTML 通过首先删除边框，然后添加填充到 0px，因为下面函数中的 "element" 是 "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>

我从 class 中删除了边框和填充，因为它将使用 jQuery 验证器 "highlight" 和 [=27] 即时应用和删除=] 无论如何。

jQuery 中使用跨度和 class、MVC 框架的基于 Kendo 模型的验证

Kendo model-based validation in jQuery using span and a class, MVC framework

html

css

validation

asp.net-mvc

jquery