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

1
votes

I'm working on a legacy .NET WebForms project where the front-end is being updated with Bootstrap.

There are some .NET Validation Controls which are validating on the ClientSide, but the "has-error" class needs to be added to the parent div of the input fields to match the Bootstrap markup.

Is there an event hook or a way of extending the .NET Validators so that I can add the "has-error" class to an invalid control group and remove it when valid?

e.g: Here is my markup which works server side:

<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>
3
javascriptasp.netvalidationtwitter-bootstrap

3 Answers

2
votes

I was requiring the has-feedback class on the form-group div as well as the glyphicon tick and crosses depending on whether the input was valid or not. What I have found that works in my solution is to override asp.net's client side function ValidatorUpdateDisplay (note my code utilizes jQuery although you could use native 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);
        }
    }
}

This adds the bootstrap validation to fields when they change as well as when an event on a control that has causesvalidation="true" is triggered.

Note: this is only adding the validations on the client side.

0
votes

You'll need to put a id on the element

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

and this is the javascript which adds a class to a <div> element

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

Here is what I did:

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

and then my js looked like this:

$(document).ready(function() {

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

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

    });
});