Asp:Net 必填字段将验证组的控件变回红色

Posted

技术标签:

【中文标题】Asp:Net 必填字段将验证组的控件变回红色【英文标题】:Asp:Net Required field turn control back color red for validation groups 【发布时间】:2017-01-14 02:53:48 【问题描述】:

如果触发了必填字段,我已经成功地将控件的背面颜色变为红色。但是,我无法让它对组中的控件起作用。

我的每个页面中都有这个 js,就在结束 body 标记之前

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>

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

【问题讨论】:

【参考方案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>

【讨论】:

感谢您。我如何在页面提交时调用它。目前,离开需要填写的必填字段时,它工作正常。 还有一种方法可以为下拉菜单执行此操作,再次感谢 不需要,它适用于页面上验证的每个元素(包括下拉菜单)。只需将其粘贴到 html 中,您就会看到。如果元素有效,它将在焦点丢失时通过删除 ErrorControl 类恢复正常颜色。 谢谢,但它似乎只适用于某些元素。此外,当我单击下一个按钮时,页面会调用我的代码,但即使我也问过它也不会导致验证 这是一个不同的问题。然后你可能有一个 javascript/jQuery 错误。如果是这种情况,请检查您的控制台。

以上是关于Asp:Net 必填字段将验证组的控件变回红色的主要内容,如果未能解决你的问题,请参考以下文章

如何验证复合控件

ASP.NET 验证失败时更改文本框的 css 类

表单验证控件Verify.js

只需单击一个按钮即可启用必填字段验证

使用 asp.net core 删除所需的验证

使用 Select2 ASP.NET MVC 时进行不显眼的验证