Howto make RequiredFieldValidator change the css class of the parent div

Question

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

    First name
    

        
      

Answer 1

I think you may find the below option useful. Basically it overrides one of ASP.NET validations default scripts. And shoves some logic into it to add / remove error class on parent div.

The problem I had faced with this task was getting my script to execute after validations were triggered since the DOM is not reloaded. By overriding this the original validation script you have the ability to run your own script when the validation display is updated.

This way you can continue to use your other validation controls. You do have to place the script at the bottom of your page or masterpage. I also used JQuery to make things simpler.

*Note the below code requires your validators be set to display dynamic. If you don't want them to be visible you can add a css class to them and set display: none.