Потерянный: Кастомизация стандартных валидаторов

исходные коды
Вообщем-то, пришлось столкнуться с такой задачей: есть разметка с использованием стандартных валидаторов, нужно изменить работу валидаторов таким образом, чтобы вместо вывода сообщений об ошибках подсвечивать соотвествующий контрол рамкой или вообще менять стиль css.

В результате родился скрипт, текст которого приведен в конце топика.

В качестве примера покажу, как выглядит страница с использованием стандартных валидаторов:

И после применения javascript:

Чтобы добиться такого эффекта, мне требуется дописать в конце страницы или на событие pageLoaded (если использую на странице ScriptManager & PageRequestManager) следующий javascript-код:


   <script language="javascript" type="text/javascript">
   Web.Customization.validatorsStylingApply();
   Web.Customization.invalidatedControlStyleName = "invalidatedControl";
   Web.Customization.invalidatedSelectControlStyleName = "invalidatedSelectControl";
   </script>

Свойство invalidatedControlStyleName используется для указания, какой стиль будет применен к валидируемому контролу в случае, если сам валидатор !isvalid; После того, как валидатор стал валидным - восстанавливается тот класс контрола, который был до применения стиля;

И описать соотвествующий стиль:


    <style type="text/css">
        
    .invalidatedControl {
   border: 2px solid #DD0000;
 }

    </style>

Также поддерживается та ситуация, когда к контролу применяется несколько валидаторов, например:


               <td>
                   <asp:TextBox ID="txtAdministrativeEmail" runat="server" Text="" Columns="40" MaxLength="40" Width="240px"></asp:TextBox>
                   <asp:RequiredFieldValidator ID="rfvEmail" runat="server"
                                               ControlToValidate="txtAdministrativeEmail"
                                               SetFocusOnError="false"
                                               EnableClientScript="true"
                                               Display="Dynamic"
                                               ErrorMessage="Enter the correct administrative email"
                                               Font-Size="12pt"></asp:RequiredFieldValidator>
                                              
                   <asp:RegularExpressionValidator ID="revEmail"
                                                   runat="server"
                                                   ControlToValidate="txtAdministrativeEmail"
                                                   Display="Dynamic"
                                                   SetFocusOnError="false"
                                                   EnableClientScript="true"
                                                   ErrorMessage="Invalid administrative email, please enter correct value..."
                                                   ValidationExpression=".*@.*\..*"  ></asp:RegularExpressionValidator>
               </td>

Собственно, сам код javascript-класса Web.Customization:


/*  customization of validation controls */
var Web = {};
Web.Customization = function() {
    ///
    ///Helper class for the standart asp.net validators styling
    ///

    this.invalidatedControlStyleName = "invalidatedControl";
    this.invalidatedSelectControlStyleName = "invalidatedControl";
}

Web.Customization.prototype.validate = function() {
    ///
    ///Custom Validation proxy method
    ///

    var hooked_result = false;
    if (typeof Page_Validators != 'undefined' &&
        Page_Validators != null) {

        if (this["fwvalidator"] != null) {

            var validator = this["fwvalidator"];
            var fwevaluationfunction_object = eval("hooked_validator = " + this["fwevaluationfunction"]);
            eval("hooked_result = hooked_validator(validator);")
            validator.isvalid = hooked_result;
            var object = $get(this["controltovalidate"]);
            var controlstyle = "";

            if (hooked_result) {
                for (var i = 0; i < Page_Validators.length; i++) {
                    var previousValidator = Page_Validators[i];

                    if (previousValidator.controltovalidate == this.controltovalidate) {
                        if (previousValidator.id != this.id) {
                            hooked_result = previousValidator.isvalid;
                        }
                        else if (previousValidator.id == this.id) {
                            break;
                        }
                    }
                }
            }

            if (hooked_result) {
                if (this["controlstyle"] != null) {
                    controlstyle = this["controlstyle"];
                    object.className = controlstyle;

                }
                else
                    object.removeAttribute("className");

                if (object.tagName == 'SELECT') {
                    var parentObj = object.parentElement;
                    if (parentObj.tagName == 'DIV') {
                        parentObj.removeAttribute("className");
                    }
                }

            }
            else {
                if (object.tagName == 'SELECT') {
                    var parentObj = object.parentElement;
                    if (parentObj.tagName == 'DIV') {
                        parentObj.className = Web.Customization.invalidatedSelectControlStyleName;
                    }
                }
                else {
                    object.className = Web.Customization.invalidatedControlStyleName;
                }
            }
        }
    }

    return hooked_result;
};

Web.Customization.prototype.validatorsStylingApply = function() {
    ///
    ///Applies the custom styling logic into the all validators on the current page
    ///
    
    if (typeof Page_Validators != 'undefined' &&
        Page_Validators != null) {
        var validators = Page_Validators;

        for (var i = 0; i < validators.length; i++) {
            if (validators[i].attributes["evaluationfunction"] != null) {

                if (validators[i].attributes["display"] != null) {
                    validators[i].attributes.removeNamedItem("display");
                }

                var displayAttribute = document.createAttribute("display");
                displayAttribute.value = "None";
                validators[i].attributes.setNamedItem(displayAttribute);

                if (validators[i]["fwvalidator"] == null) {
                    validators[i]["fwvalidator"] = validators[i];
                    validators[i]["fwevaluationfunction"] = validators[i].attributes["evaluationfunction"].value;
                    validators[i]["controltovalidate"] = validators[i].attributes["controltovalidate"].value;

                    var control = $get(validators[i]["controltovalidate"]);
                    if (control != null &&
                    control.className != null &&
                    control.className != '')
                        validators[i]["controlstyle"] = control.className;

                    validators[i].attributes["evaluationfunction"].nodeValue = Web.Customization.validate;
                }
            }
        }
    }
}

/*  global objects initialization */
Web.Customization = new Web.Customization();