.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class答案

【问题标题】：.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class.NET ClientSide RequiredFIeldValidator with Bootstrap "has-error" Class
【发布时间】：2014-06-27 03:10:10
【问题描述】：

我正在处理一个遗留的 .NET WebForms 项目，其中前端正在使用 Bootstrap 进行更新。

有一些 .NET 验证控件正在客户端进行验证，但需要将“has-error”类添加到输入字段的父 div 以匹配 Bootstrap 标记。

是否有事件挂钩或扩展 .NET 验证器的方法，以便我可以将“has-error”类添加到无效的控制组并在有效时将其删除？

例如：这是我在服务器端工作的标记：

<div class="form-group <%= IIf(RequiredFieldValidator1.IsValid, "has-error", "") %>">
    <label class="control-label">Test</label>
    <asp:TextBox runat="server" ID="TextBox1" CssClass="form-control" />
    <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1"
        ContolToValidate="TextBox1" ErrorMessage="TextBox1 is Required!" />
</div>

【问题讨论】：

标签： javascript asp.net validation twitter-bootstrap

【解决方案1】：

我需要form-group div 上的has-feedback 类以及字形刻度和交叉，具体取决于输入是否有效。我发现在我的解决方案中有效的是覆盖 asp.net 的客户端函数ValidatorUpdateDisplay（请注意我的代码使用 jQuery，尽管您可以使用本机 JavaScript）：

var originalValidatorUpdateDisplayMethod;

if (typeof(ValidatorUpdateDisplay) == "function"
    && typeof(originalValidatorUpdateDisplayMethod) != "function") {

    originalValidatorUpdateDisplayMethod = ValidatorUpdateDisplay;

    // now overwrite original method

    ValidatorUpdateDisplay = function (val) {

        originalValidatorUpdateDisplayMethod(val); // call original method first

        var parent = $("#" + val.controltovalidate).parent();

        if (parent.hasClass("form-group")) {

            parent.addClass("has-feedback");
            parent.toggleClass("has-success", val.isvalid);
            parent.toggleClass("has-error", !val.isvalid);

            var glyph = parent.find("span.form-control-feedback");
            if (glyph.length == 0) {
                glyph = $("<span class='glyphicon form-control-feedback' />");
                parent.append(glyph);
            }
            glyph.toggleClass("glyphicon-ok", val.isvalid);
            glyph.toggleClass("glyphicon-remove", !val.isvalid);
        }
    }
}

这会在字段发生更改以及触发具有causesvalidation="true" 的控件上的事件时向字段添加引导验证。

注意：这只是在客户端添加验证。

【讨论】：

这太棒了！我非常喜欢它，虽然我想知道你的标记看起来如何。您介意分享标记吗（尤其是 span.form-control-feedback 所在的位置）。
恐怕我没有它，因为我无法再访问相关代码。
这很可悲，但没有遗憾，我现在确实正确放置了它。唯一让我烦恼的是，由于此代码切换，它不能真正处理一个控件上的多个验证器，我将不得不修复它。

【解决方案2】：

您需要在元素上添加id

<div id="div1" class="someclass">
    <img ... id="image1" name="image1" />
</div>

这是向<div>元素添加类的javascript

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

【讨论】：

我已经编辑了我的问题，希望能更清楚！我知道如何使用 JS 添加一个类，但我不知道如何扩展 .NET 客户端验证，以便我的所有验证控件都将“has-error”类添加到父 div。

【解决方案3】：

这是我所做的：

<asp:Panel ID="pnlNumberOnly" runat="server" CssClass="form-group">
    <label for="<%= tbNumberOnly.ClientID %>" class="control-label">Enter a number:</label>
    <asp:TextBox ID="tbNumberOnly" runat="server" CssClass="form-control" />
    <asp:RegularExpressionValidator runat="server" ID="regExpNumberOnly" 
        ControlToValidate="tbNumberOnly"
        Display="Dynamic"
        ErrorMessage="Numbers only" CssClass="control-label"
        ValidationExpression="^\d+$" EnableClientScript="True"/>
</asp:Panel>

然后我的 js 看起来像这样：

$(document).ready(function() {

    $('#<%= tbNumberOnly.ClientID %>').change(function() {

        if ($('#<%= regExpNumberOnly.ClientID %>').is(':visible')) {
            $('#<%= pnlNumberOnly.ClientID %>').addClass('has-error');
        } else {
            $('#<%= pnlNumberOnly.ClientID %>').removeClass('has-error');
        }

    });
});

【讨论】：