1

在网页上，我有 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" />
4

4 回答 4

3

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

做这个

第 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;
}
于 2012-11-15T10:16:57.723 回答
0

使用RequiredFieldValidator，您不能添加您的自定义代码。您将不得不使用自定义验证。这是一个关于如何使用自定义验证的好链接。
未调用下拉列表的自定义验证器（显然）

于 2012-11-15T08:35:51.707 回答
0

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

1种方式：

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

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

于 2012-11-15T08:40:40.900 回答
0

asp net 客户端验证的验证事件

看看上面的链接。这就是您可以在客户端捕获验证的方式。那就是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 上所有控件的列表，其中也包含它所属元素的 id。<asp:....ValidatorPage_Validators[i].controltovalidate

于 2012-11-15T09:00:02.373 回答