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

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，我该如何拦截提交事件，在.NET验证控件上执行验证，然后为每个包含无效验证器的div元素的父div元素添加“error”类？

总之，如果div包含无效的验证器控件，我想为该div添加“error”类。我也可以接受其他实现方法的建议。

- Scott

Answer 1

Scott，你好，

我在遇到类似问题时看到了您的帖子。我的一个问题是，由于页面没有在验证触发时重新加载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>

- Jeremy A. West

Answer 2

找到答案了...

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

- Scott

Answer 3

你可以使用jQuery完成这个，非常简单，请参考下面的代码。

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

        {

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

    })

- Maxymus

---

这完全没有回答我提出的问题。这似乎是为编写自定义JavaScript验证程序而设计的。我的问题直接涉及与.NET验证控件的交互。 - Scott