更改表单提交验证上的 asp 控件的背景颜色失败

Question

在网页上，我有 3 个下拉控件和几个带有必填字段验证器的文本框。

我想突出显示未指定值的控件。可以设置边框颜色或背景颜色。

我怎样才能做到这一点？我只希望它在页面提交上。

请帮忙！

两行代码示例，包含两个控件和一个提交按钮

                        <tr>
                            <td bgcolor="#ffffff" width="500px">
                                &nbsp;
                                <asp:Label ID="lblcategory" runat="server" Text="Category of Incident" Width="250px"></asp:Label>
                                <asp:DropDownList ID="ddlincident" runat="server" Width="200px" ValidationGroup="validatePortal"
                                    CssClass="select">
                                </asp:DropDownList>
                            </td>
                            <td style="vertical-align: top; width: 10px">
                                <asp:Label ID="Label8" Text="*" ForeColor="Red" runat="server"></asp:Label>
                                <asp:RequiredFieldValidator ID="rfvddlincident" runat="server" ControlToValidate="ddlincident"
                                    ValidationGroup="validatePortal" Display="None" ForeColor="Red" InitialValue="0"
                                    SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                            <td style="vertical-align: top">
                                <asp:Label ID="Label2" runat="server" CssClass="instructiontext"></asp:Label>
                            </td>
                        </tr>
                        <tr>
                            <td bgcolor="#ffffff" width="500px">
                                &nbsp;
                                <asp:Label ID="lblplace" runat="server" Text="Where Did the Incident Take Place"
                                    Width="250px"> </asp:Label>
                                <asp:TextBox ID="txtplace" MaxLength="50" runat="server" Width="200px" CssClass="textbox"></asp:TextBox>
                            </td>
                            <td style="vertical-align: top; width: 10px">
                                <asp:Label ID="Label9" Text="*" ForeColor="Red" runat="server" Style="vertical-align: top"></asp:Label>
                                <asp:RequiredFieldValidator ID="txttxtplace" runat="server" ControlToValidate="txtplace"
                                    ValidationGroup="validatePortal" Display="None" ForeColor="Red" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            </td>
                            <td style="vertical-align: top">
                                <asp:Label ID="Label3" runat="server" CssClass="instructiontext"></asp:Label>
                            </td>
                        </tr>

                    <asp:Button ID="Button2" runat="server" Text="Next" ValidationGroup="validatePortal"
                        OnClick="next_clicked" CssClass="hoverbuttonblue" UseSubmitBehavior="false" />

Answer 1

这样做的方法是重写在 ASP.NET 验证工作时调用的 WebFOrm_OnSubmit 函数。

这样做

第 1 步：将其添加到样式表中的某处（为有错误的文本框创建新样式规则）

.errorMessage{border: 1px solid #f00; background-color: #0ff;}

第 2 步：将以下脚本放在表单标记之后。 （覆盖在这里）

function WebForm_OnSubmit() {
    var retValue = true;
    if (ValidatorOnSubmit && !ValidatorOnSubmit()) {
        for (var i = 0; i < Page_Validators.length; i++) {
            var validator = Page_Validators[i];
            document.getElementById(validator.controltovalidate).className = validator.isvalid ? "" : "errorMessage";
            if (!validator.isvalid)
                retValue = false;
        }
    }
    return retValue;
}

Answer 2

使用RequiredFieldValidator 你不能添加你的自定义代码。您将不得不使用自定义验证。这是一个关于如何使用自定义验证的好链接。
customvalidator for dropdownlist not being invoked (apparently)

Answer 3

有两种方法可以做到这一点：

一种方式：

要实现此功能，您需要编写自定义 java 脚本函数来验证控制。如果验证为假，请更改控件的背景颜色，否则请保持原样。

2路： 使用自定义验证器进行验证，如果验证为假，则更改控件背景颜色。但这是客户端验证的服务器端验证，您必须使用 java 脚本函数进行验证。

Answer 4

Validation event for asp net client side validation

看看上面的链接。这就是您可以在客户端捕获验证的方式。那就是jQuery。但是你可以用普通的 JS 做同样的事情。处理程序将如何实际分配给您的表单取决于您。我在上面链接的问题是用jQuery完成的。但是可以使用纯JS：https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

var form = document.getElementById("our_form_id");
if (el.addEventListener) {
  form.addEventListener('submit', highlightFields, false); 
} else if (el.attachEvent)  {
  form.attachEvent('onsubmit', highlightFields);
}
function highlightFields() {
            if (typeof Page_Validators != 'undefined') {                
                for(var i = 0; i < Page_Validators.length; i++){
                    if (!Page_Validators[i].isvalid) {
                       document.getElementById(Page_Validators[i].controltovalidate).style.border = "solid 1px red";
                    }
                }

            }
        }

我的一个项目中有类似的代码，它运行良好。 这里Page_Validators 是客户端所有<asp:....Validator 控件的列表Page_Validators[i].controltovalidate 包含它所属的元素的ID。