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

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

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.

<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 3

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.