Как заставить RequiredFieldValidator изменить класс css родительского div

Question

У меня есть элемент ввода TextBox, который имеет RequiredFieldValidator как:

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

Когда TextBox пуст при отправке, я хочу добавить класс 'form-error' к родительскому 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>

Возможно ли это, и если да, то как мне это сделать?

Answer 1

Используйте следующее:

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

Этот код украшает оригинальную функцию ValidatorUpdateDisplay, отвечающую за обновление отображения ваших валидаторов, обновление controltovalidate ближайшего div.

Answer 2

с RequiredFieldValidator вы не можете добавить свой пользовательский код.

вы должны использовать asp.net customvalidator control и написать свою собственную функцию проверки JavaScript, которая устанавливает класс в div.

Answer 3

Я думаю, вам может пригодиться опция ниже. В основном он переопределяет один из стандартных сценариев проверки ASP.NET. И внедряет в него некоторую логику, чтобы добавить / удалить класс ошибок в родительском div.

Проблема, с которой я столкнулся при выполнении этой задачи, заключалась в том, чтобы заставить мой скрипт выполняться после запуска проверок, поскольку DOM не перезагружается. Переопределив этот исходный сценарий проверки, вы можете запускать собственный сценарий при обновлении отображения проверки.

Таким образом, вы можете продолжать использовать другие элементы управления проверкой. Вы должны разместить скрипт внизу вашей страницы или главной страницы. Я также использовал JQuery, чтобы сделать вещи проще.

* Обратите внимание, что приведенный ниже код требует, чтобы ваши валидаторы были настроены на динамическое отображение. Если вы не хотите, чтобы они были видны, вы можете добавить к ним класс css и установить отображение: нет.

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