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

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

1路：

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

2路：使用自定义验证器进行验证，如果验证为false，则更改控件背景颜色。但这是客户端验证的服务器端验证，您必须使用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。

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

4 个答案: