Javascript .NET客户端RequiredFIeldValidator，带引导；“有错误”；等级

我正在从事一个遗留的.NETWebForms项目，其中前端正在使用引导更新

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

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

e、 g:这是我在服务器端使用的标记：

<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>

试验

您需要在元素上放置一个

id

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

以下是我所做的：

<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');
        }

    });
});

$（文档）.ready（函数（）{
$（'#'）。更改（函数（）{
如果（$（“#”）是（“：可见”）{
$（'#'）.addClass（'has-error'）；
}否则{
$（'#'）.removeClass（'has-error'）；
}
});
});

我要求

表单组

div上的

has feedback

类以及glyphicon勾号和叉号，具体取决于输入是否有效。我发现在我的解决方案中有效的是重写asp.net的客户端函数

ValidatorUpdateDisplay

（注意，我的代码使用jQuery，尽管您可以使用本机JavaScript）：

var originalvalidatorupdatedisplay方法；
if（typeof（ValidatorUpdateDisplay）=“函数”
&&typeof（originalValidatorUpdateDisplayMethod）！=“函数”）{
originalValidatorUpdateDisplayMethod=ValidatorUpdateDisplay；
//现在覆盖原始方法
ValidatorUpdateDisplay=函数（val）{
originalValidatorUpdateDisplayMethod（val）；//首先调用原始方法
var parent=$（“#”+val.controltovalidate）.parent（）；
if（parent.hasClass（“表单组”））{
parent.addClass（“有反馈”）；
toggleClass（“has success”，val.isvalid）；
toggleClass（“有错误”！val.isvalid）；
var glyph=parent.find（“span.form控制反馈”）；
如果（glyph.length==0）{
字形=$（“”）；
parent.append（glyph）；
}
glyph.toggleClass（“glyphicon ok”，val.isvalid）；
glyph.toggleClass（“glyphicon remove”，！val.isvalid）；
}
}
}

这会在字段发生更改时以及触发控件上具有

causesvalidation=“true”

的事件时，将引导验证添加到字段中

---

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

我编辑了我的问题，希望能让问题更清楚！我知道如何使用JS添加类，但我不知道如何扩展.NET客户端验证，以便我的所有验证控件将“has error”类添加到父div。这太棒了！我非常喜欢它，不过我想知道你的标记看起来怎么样。您是否介意共享标记（尤其是span.form-control-feedback所在的位置）。我恐怕没有标记，因为我已经无法访问所讨论的代码。这很遗憾，但并不令人沮丧，我现在确实正确放置了标记。唯一困扰我的是，由于这段代码是切换的，它不能在一个控件上处理多个验证器，我必须解决这个问题。

$(document).ready(function() {

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

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

    });
});

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);
        }
    }
}