Change textbox's css class when ASP.NET Validation fails

asp.net javascript jquery validation webforms

40,584

Solution 1

Here is quick and dirty thing (but it works!)

<form id="form1" runat="server">
      <asp:TextBox ID="txtOne" runat="server" />
      <asp:RequiredFieldValidator ID="rfv" runat="server" 
                                 ControlToValidate="txtOne" Text="SomeText 1" />
      <asp:TextBox ID="txtTwo" runat="server" />
      <asp:RequiredFieldValidator ID="rfv2" runat="server" 
                                 ControlToValidate="txtTwo" Text="SomeText 2" />
      <asp:Button ID="btnOne" runat="server" OnClientClick="return BtnClick();" 
                                         Text="Click" CausesValidation="true" />
    </form>
    <script type="text/javascript">
        function BtnClick() {
            //var v1 = "#<%= rfv.ClientID %>";
            //var v2 = "#<%= rfv2.ClientID %>";
            var val = Page_ClientValidate();
            if (!val) {
                var i = 0;
                for (; i < Page_Validators.length; i++) {
                    if (!Page_Validators[i].isvalid) {
                        $("#" + Page_Validators[i].controltovalidate)
                         .css("background-color", "red");
                    }
                }
            }            
            return val;
        }
    </script>

Solution 2

You could use the following script:

<script>

    $(function(){
        if (typeof ValidatorUpdateDisplay != 'undefined') {
            var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;

            ValidatorUpdateDisplay = function (val) {
                if (!val.isvalid) {
                    $("#" + val.controltovalidate).css("border", "2px solid red");
                }

                originalValidatorUpdateDisplay(val);
            }
        }
    });

</script>

This code decorates the original ValidatorUpdateDisplay function responsible for updating the display of your validators, updating the controltovalidate as necessary.

Hope this helps,

Solution 3

I think you would want to use a Custom Validator and then use the ClientValidationFunction... Unless it helpfully adds a css class upon fail.

40,584

Author by

Travis Collins

https://github.com/TravisTX

Updated on July 09, 2022

Comments

Travis Collins almost 2 years

How can I execute some javascript when a Required Field Validator attached to a textbox fails client-side validation? What I am trying to do is change the css class of the textbox, to make the textbox's border show red.

I am using webforms and I do have the jquery library available to me.
Jez over 13 years

Important notice: this won't work for trying to check whether a field is empty or not; the CustomValidator isn't triggered if the field to check is empty. :-(
billy almost 12 years

I think your v1 and v2 variables are unused :P
TheVillageIdiot almost 12 years

yep, but this is quick and dirty :D. just commented them.
billy almost 12 years

maybe dirty, but I haven't found a better solution !! :P
Ben Cameron over 11 years

Its very inefficient to iterate through every control on a page, I don't think you should do this.
Jan Aagaard over 11 years

What is the reason to write the var i = 0 statement outside of the for loop?
Grimace of Despair about 11 years

To enable easier custom styling, you can do: $("#" + val.controltovalidate).toggleClass('error', !val.isvalid);
CResults almost 11 years

+1 saved me some Google time here, thank you gsimoes and @GrimaceofDespair
Marco Luglio over 10 years

Because the only variable scope delimiter in js is the function. So declaring it inside the for declaration is misleading.
Marco Luglio over 10 years

As a sidenote, if the control has more than one validator, you will need to implement a control logic to avoid style override on multiple validations.
HasanG almost 10 years

What if user doesnt input anything and posts the page. This code won't validate on submit...
guillem almost 10 years

@HasanGürsoy I wrote this long time ago but the idea was mainly to add some behavior on standard ASP.net controls. I guess you can add some onClick behavior over any submit elements to trigger calling the function as well.
HasanG almost 10 years

Hmm yes, thank you. But I guess it will cause the same bug as I asked here: stackoverflow.com/questions/24477219/…
guillem almost 10 years

@HasanGürsoy sure as you then will need a custom validator probably