How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

Question

I have a registration page with the bootstrap styling. I have <asp:RequiredFieldValidator> and <asp:RegularExpressionValidator> to validate the form.

Now i want to change the style if the validation fails and it should change back to normal when the validation is successful .

I have found a couple of answers like : txtBox.CssClass += "error_class" ;.

But i want to know how can it be done the exact way. I found a script which did change CSS based on failed validation ,but upon successful validation it did not change to original CSS .

original css class of textbox : form-control

What will be the easiest way to do this , like setting border-color to red...??

P.S. : In the bootstrap template i am using , there are two fields : id and class . Here :

class : form-control

id : inputError

Current method to change class :

<script type="text/javascript">
        function BtnClick() {
            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("border-color", "red");
                    }
                }
            }
            return val;
        }
    </script>

two questions. 1) what method are you using to change to the failed validation class now? if you are checking in onChange it is going to be a different answer then if you are checking onSubmit. 2) why can you not use both Class and ID in .NET? is the ID the issue for you there? Have you looked into ClientIDMode="Static"? — KHeaney, Feb 19 '15 at 17:30
@KHeaney : i am posting the method i am using to change the CSS in my question and i am not checking in `onChange` . Also the `ID` i have assigned in my `` control is the one i am using in my code file for registration . And in the **template** the `id` is used to add the Css Class to it. So using `ClientIDMode` will not be necessary i guess ..? — Abhishek Ghosh, Feb 19 '15 at 17:50
how are you making call to `BtnClick()` as i am not able to make it work can you add the complete code — Learning, Sep 21 '15 at 04:34

score 1 · Accepted Answer · edited May 23 '17 at 12:14

You should just need to add additional conditionals to check for the inverse condition. Also I would create a second class specifically for the invalid version.

<script type="text/javascript">
    function BtnClick() {
        var val = Page_ClientValidate();

        if (!val) {
            for (i = 0; i < Page_Validators.length; i++) {
                if (!Page_Validators[i].isvalid) {
                    if (!($("#" + Page_Validators[i].controltovalidate).hasClass("form-invalid")))
                        $("#" + Page_Validators[i].controltovalidate).toggleClass("form-control form-invalid");
                }
                else {
                    if (!($("#" + Page_Validators[i].controltovalidate).hasClass("form-control")))
                        $("#" + Page_Validators[i].controltovalidate).toggleClass("form-control form-invalid");
                }
            }
        }
        return val;
    }
</script>

Where form-control is your normal class and form-invalid is you class that adds the red border.

See here removeClass() if it exists and here jquery change class name if you want to change the method at all.

can u please explain to me the above `if-else` statements..? The first `if` condition checks that if the page is not valid and if the class is not set to `form-invalid` then it will add the `form-invalid` class to it ..?? Am i understanding this right ..? — Abhishek Ghosh, Feb 19 '15 at 20:21
Not quite. The first `if` condition checks each validator on the page, not the page itself, to see if any one of the validators are invalid. The second part is correct. A check is made to see if the `form-invalid` class is there or not. The toggle then checks for all classes listed, so it looks for both `form-control` and `form-invalid`. If you have gotten this far `form-control` should be in the class while `form-invalid` should not. Toggle will remove existing classes, ie `form-control`, and add in missing ones, ie `form-invalid`. — KHeaney, Feb 19 '15 at 20:36

How can I change CSS Class of a textbox on failed Validation and then again change it back on successful validation?

1 Answers1