javascript - ASP :Net Required field turn control back color red for validation groups

Question

如果触发了必填字段的验证，我已经成功地将控件的背景颜色变成红色。但是我无法让它适用于组中的控件。

我的每个页面中的结束正文标记之前都有这个js

function WebForm_OnSubmit() {
 if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() ==false) {
  for (var i in Page_Validators) {
    try {
        var control = document.getElementById(Page_Validators[i].controltovalidate);
        if (!Page_Validators[i].isvalid) {
            control.className = "ErrorControl";

        } else {
            control.className = "";
        }
    } catch (e) {
        var r = 0;
    }
}
return false;
}
return true;
}

以下用于错误样式的 css 类。

.ErrorControl
{
    background-color: #FBE3E4;
    border: solid 1px Red;
}

这是验证组中的控件的示例

<asp:RequiredFieldValidator runat="server" ID="vldTelephoneNumber" ControlToValidate="txtTelephoneNumber" ValidationGroup="ResellerGroup"></asp:RequiredFieldValidator>

如有任何帮助，我们将不胜感激

Answer 1

这是我用来更改正在验证或单击提交按钮时被视为无效的元素的边框和背景颜色的 JavaScript 函数。它只会将特定验证组的元素变成红色，而不是所有具有验证器的元素。

当验证成功并且焦点丢失时，它还会将颜色恢复正常。

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof (Page_Validators) !== 'undefined') {
            //check the elements at a regular interval to change the color back to normal
            setInterval(function () { fieldValidators() }, 100);
        }
    });

    function fieldValidators() {
        if (typeof (Page_Validators) !== 'undefined') {
            for (var i = 0; i < Page_Validators.length; i++) {
                var val = Page_Validators[i];
                var ctrl = document.getElementById(val.controltovalidate);
                if (ctrl != null && ctrl.style != null) {
                    if (!val.isvalid) {
                        $(ctrl).addClass("ErrorControl");
                    } else if ($(ctrl).hasClass("ErrorControl")) {
                        $(ctrl).removeClass("ErrorControl");
                    }
                }
            }
        }
    }
</script>