Добавление класса в родительский div, если он содержит недопустимые элементы проверки ASP.NET

Question

У меня есть приложение ASP.NET, которое использует встроенные средства проверки.Конечная цель - запустить клиентскую проверку при щелчке на кнопке отправки и добавить класс в элемент div, если он содержит недопустимый элемент управления.Я в основном пытаюсь повернуть метку для элемента формы красным, если он недействителен.:)

У меня есть такая разметка (один div для каждого элемента формы):

<div class="friendFormElement float_left bold">
        First Name: * <asp:RequiredFieldValidator ID="rfv_fromFirstName" ControlToValidate="fromFirstName" Display="None" CssClass="validationError" ErrorMessage="From first name is required." runat="server" /> <br/>
        <asp:TextBox ID="fromFirstName" runat="server" />
    </div>

Используя jQuery, как мне перехватить событие submit, запустить проверку на элементах управления .NET, а затем добавить класс «error» в родительский элемент div для каждого div, который содержит недопустимый валидатор?

Суть в том, что я хотел бы добавить класс «error» в div, если он содержитневерный валидатор.Я открыт для других идей для реализации.

Answer 1

Скотт,

Я столкнулся с вашим постом, когда столкнулся с подобной проблемой.У меня возникла одна проблема, поскольку страница не перезагружала DOM при запуске проверки, мой JQuery не запускался и класс ошибок не применялся.

После прочтения следующей статьи иНа ваш пост я придумал следующее решение, которое мне очень помогло.Размещать это здесь в надежде, что это может кому-то помочь.По сути, он переопределяет один из исходных сценариев проверки asp.net и имеет JQuery для очистки / добавления класса ошибки в div.

Добавьте этот сценарий внизу страницы:

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

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

  $(document).ready(function () {
        $("#<%=  ButtonName.ClientID %>").click(function () {
        if(validation here)

        {

            }
            else{
              $('.friendFormElementfloat_leftbold').css("background-color", "Red");
              return false;
            }
        })

    })

Answer 3

Нашел ответ ...

$.each(Page_Validators, function (index, validator) {
    if (!validator.isvalid) {
        $(validator).closest("div").addClass("error");
    }
});