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.

Jeremy A. West · Accepted Answer · 2012-03-27 11:21:44Z

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>

Scott · Accepted Answer · 2012-02-23 00:34:46Z

0

Found the answer...

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

answered Feb 23, 2012 at 0:34

Scott

14k20 gold badges99 silver badges157 bronze badges

Comments

Maxymus · Accepted Answer · 2012-02-23 05:09:06Z

-1

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;
            }
        })

    })

answered Feb 23, 2012 at 5:09

Maxymus

1,4902 gold badges14 silver badges22 bronze badges

1 Comment

Scott Over a year ago

That doesn't answer at all the question I had. This appears to be for writing a custom javascript validation routine. My question dealt directly with interaction with the .NET validation controls.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related