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


Tags: html,css,asp.net,twitter-bootstrap,validation

Problem :

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>


Solution :

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.


    CSS Howto..

    How to make attractive dropdown menu using css3? [closed]

    ASP.NET MVC: How do other people apply conditional CSS classes?

    select the element before the last using nth child regardless of how many elements you have? [duplicate]

    how to fix an element inside bootstrap modal with respect to bootstrap modal

    How can I position a web page in the middle of the screen?

    How can I use html tag in this javascript? [duplicate]

    How to stop web content from being displayed before css/jquery is prepared?

    Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How to force the horizontal scroll bar to appear?

    css how can i center multiple elements with absolute position

    Block grid shows horizontal scroll bar in Foundation

    How to customize in javascript?

    How to remove css class with some effect using jQuery?

    How to make html button look pressed in using css?

    Angularjs how to add/remove dynamically input form with ng-Repeat on Google Maps?

    How can I force an image to be no larger than the section it's in?

    How do you position div's in html5? [closed]

    How to remove dotted border around active hyperlinks in IE8 with CSS

    How to force the casing of letters in a textbox

    how can i center a nested div

    How to use very large font sizes in Internet Explorer with CSS that won't affect design?

    how to center align IMG in div?

    How to change text (not font size) according to screen size in CSS?

    How do I output HTML form data to PDF?

    How to reduce space between two words vertically in css/html

    CSS classes: base+additional. How to define?

    How to achieve multiple icon hover transitions over one image

    how to make this slide menu work

    How to make jQuery show() stay on page

    How to center a button WITHOUT a div using CSS