Adding a class to a parent div if it contains invalid ASP.NET validation controls

Question

I have an ASP.NET application that makes use of the built in validation controls. The end goal is to fire validation client side when the submit button is clicked, and add a class to a div element if it contains an invalid control. I'm basically trying to turn the label for the form element red if it's invalid. :)

I have markup like this (one div for each form element):

<div class="friendFormElement float_left bold">
        First Name: * <asp:RequiredFieldValidator ID="rfv_fromFirstName" ControlToValidate="fromFirstName" Display="None" CssClass="validationError" ErrorMessage="From first name is required." runat="server" /> <br/>
        <asp:TextBox ID="fromFirstName" runat="server" />
    </div>

Using jQuery, how would I intercept the submit event, fire validation on the .NET validation controls, and then add an "error" class to the parent div element for each div that contains an invalid validator?

Bottom line is I'd like to add an "error" class to the div if it contains an invalid validator control. I'm open to other ideas for implementation as well.

Answer 1

Scott,

I ran across your post when facing a similar problem. One issue I had is since the page did not reload the DOM when validation was fired my JQuery was not being triggered and the error class was not being applied.

After reading the following article and your post I came up with the following solution which worked very well for me. Posting it here in hopes that it may help someone. Basically it overrides one of the original asp.net validation scripts and has some JQuery to clear/add the error class to div.

Add this script to the bottom of your page:

<script type="text/javascript">
    function ValidatorUpdateDisplay(val) {
        if (typeof (val.display) == "string") {
            if (val.display == "None") {
                return;
            }
            if (val.display == "Dynamic") {
                val.style.display = val.isvalid ? "none" : "inline";
                return;
            }
        }
        if ((navigator.userAgent.indexOf("Mac") > -1) && (navigator.userAgent.indexOf("MSIE") > -1)) {
            val.style.display = "inline";
        }
        val.style.visibility = val.isvalid ? "hidden" : "visible";


        //---  Add / Remove Error Class
        var triggeredSiblings = 0;
        if (val.isvalid) {
            $(val).siblings('span').each(function () {
                if ($(this).isvalid == false) { triggeredSiblings = 1; }
            });
            if (triggeredSiblings == 0) { $(val).closest("div").removeClass("error"); }
        } else {
            $(val).closest("div").addClass("error");
        }
    }
</script>

Answer 2

Found the answer...

$.each(Page_Validators, function (index, validator) {
    if (!validator.isvalid) {
        $(validator).closest("div").addClass("error");
    }
});

Answer 3

You can use jquery for this its very simple please refer the below code.

  $(document).ready(function () {
        $("#<%=  ButtonName.ClientID %>").click(function () {
        if(validation here)

        {

            }
            else{
              $('.friendFormElementfloat_leftbold').css("background-color", "Red");
              return false;
            }
        })

    })