如果包含无效的 ASP.NET 验证控件，则将类添加到父 div答案

【问题标题】：Adding a class to a parent div if it contains invalid ASP.NET validation controls如果包含无效的 ASP.NET 验证控件，则将类添加到父 div
【发布时间】：2012-03-13 09:21:34
【问题描述】：

我有一个使用内置验证控件的 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，我将如何拦截提交事件，在 .NET 验证控件上触发验证，然后为每个包含无效验证器的 div 的父 div 元素添加一个“错误”类？

如果它包含无效的验证器控件，我想向 div 添加一个“错误”类。我也愿意接受其他实施想法。

【问题讨论】：

标签： jquery asp.net css validation

【解决方案1】：

斯科特，

在遇到类似问题时，我偶然发现了您的帖子。我遇到的一个问题是，由于在触发验证时页面没有重新加载 DOM，所以我的 JQuery 没有被触发并且错误类没有被应用。

阅读以下article 和您的帖子后，我想出了以下解决方案，对我来说非常有效。在这里发布它，希望它可以帮助某人。基本上它覆盖了原始的 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>

【讨论】：

【解决方案2】：

你可以使用 jquery 来实现它，它非常简单，请参考下面的代码。

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

        {

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

    })

【讨论】：

这根本没有回答我的问题。这似乎是用于编写自定义 javascript 验证例程。我的问题直接涉及与 .NET 验证控件的交互。

【解决方案3】：

找到答案了……

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

【讨论】：