Howto make RequiredFieldValidator change the css class of the parent div

Question

I have a TextBox input element that has a RequiredFieldValidator as such:

<div>
    <label>First name</label>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator>
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox>
</div>

When the TextBox is empty on submit I want to add the class 'form-error' to the parent Div:

<div class="form-error">
    <label>First name</label>
    <asp:RequiredFieldValidator ID="RequiredFieldValidatorFirstname" runat="server" ErrorMessage="Required" ControlToValidate="TextBoxFirstname"></asp:RequiredFieldValidator>
    <asp:TextBox ID="TextBoxFirstname" runat="server"></asp:TextBox>
</div>

Is this possible, and if so - how do I do it?

Answer 1

Use the following:

<script>

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

            ValidatorUpdateDisplay = function (val) {
                if (!val.isvalid) {
                    $("#" + val.controltovalidate).closest("div").addClass("form-error");
                }

                originalValidatorUpdateDisplay(val);
            }
        }
    });

</script>

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

Answer 2

with RequiredFieldValidator you can not add your custom code.

you should use asp.net customvalidator control, and write your own custom validation javascript function which sets the class to the div.