Trying to apply bootstrap styles in ASP.net webform

Question

I have a text box which has an asp:RegularExpressionValidator attached to it as so

<div class="form-group col-sm-6 <%= (revAlertValue.IsValid == false ? "has-error" : "") %>">
<label for="AlertValue" class="control-label col-sm-4">Alert Value</label>
<div class="col-sm-4 input-group">
    <span class="input-group-btn">
        <asp:Button ID="btnMediumValue" CssClass="btn btn-warning" runat="server" Text="Low" OnClientClick="btnMediumValue_Click" OnClick="btnMediumValue_Click" />
    </span>
    <asp:TextBox CssClass="form-control text-center" CausesValidation="true" ID="tbAlertValue" runat="server" MaxLength="4" />
    <asp:RegularExpressionValidator ID="revAlertValue" runat="server"
        ControlToValidate="tbAlertValue" ErrorMessage=""
        ValidationExpression="^[1-9]\d*$" />
    <asp:RequiredFieldValidator ID="rfvAlertValue" runat="server" ControlToValidate="tbAlertValue" />
    <span class="input-group-btn">
        <asp:Button ID="btnHighValue" CssClass="btn btn-danger" runat="server" Text="High" OnClientClick="btnHighValue_Click" OnClick="btnHighValue_Click" />
    </span>
</div>

I'm basically trying to apply the has-error class to my form-group if the regular expression validator is not valid. However, when I go to test and input text that would fail the regex validator the class is not applied.

I've tried writing the expression in other ways:

<%= (revResendEvery.IsValid == false) ? "has-error" : "" %>
<%= (revAlertValue.IsValid == false ? "has-error" : "") %>

I've thought maybe it has to be triggered when the submit button is pressed, or more code has to be added to the .aspx.cs handling the class addition after submit is pressed but that doesn't do the trick either.

Server side or client side?

Bert
– Bert

2016-08-11 22:07:57 +00:00
Commented Aug 11, 2016 at 22:07 — Bert
– Bert, Commented Aug 11, 2016 at 22:07
I'd prefer to get it working client side.

gh0st
– gh0st

2016-08-11 23:17:34 +00:00
Commented Aug 11, 2016 at 23:17 — gh0st
– gh0st, Commented Aug 11, 2016 at 23:17

Bert · Accepted Answer · 2016-08-11 23:26:19Z

In order to do this client side you need to tap into the client side code rendered by ASP.NET. Here is an example of some script you might include on your page to do so.

(function () {
    var originalRegularExpressionValidator = RegularExpressionValidatorEvaluateIsValid;
    RegularExpressionValidatorEvaluateIsValid = function (val) {
        var originalValidationResult = originalRegularExpressionValidator(val);

        if (!originalValidationResult) {
            var formGroup = $("#" + val.controltovalidate).closest(".form-group");
            formGroup.addClass("has-error");
        }
        return originalValidationResult;
    }
})();

This, of course, assumes you have jQuery on the page (for the closest and addClass methods), but you can replace that with whatever you want.

Additionally, you may want to look into overriding the Page_ClientValidate function ASP.NET renders. There are many questions on StackOverflow that address how to do that.

Collectives™ on Stack Overflow

Trying to apply bootstrap styles in ASP.net webform

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related