JQuery 验证插件 - 更改 asp 文本框的边框颜色

Question

我正在使用 jQuery 验证插件来验证我的 .net Web 表单 asp 文本字段。验证效果很好，但我想要通过在字段无效后更改 asp 文本框边框颜色来进行更多验证。我看到很多 Material 都涉及设置错误消息的颜色，但不是文本框字段的颜色。有些技能在 .Net 上并不能很好地发挥作用。有人知道如何使用 JQuery 验证插件来实现这一点吗？

我当前的代码如下:

ASPX页面

<asp:Label ID="lblEmail" runat="server" Text="Your Email" class="QueryLabel"></asp:Label>
            <asp:TextBox ID="txtEmail" runat="server" name="txtEmail" class="QueryBox" ClientIDMode="Static" ></asp:TextBox><br /><br />

            <asp:Label ID="lblFirstName" runat="server" Text="First Name" class="QueryLabel"></asp:Label>
            <asp:TextBox ID="txtFirstName" runat="server" name="txtFirstName" class="QueryBox" ClientIDMode="Static" ></asp:TextBox> <br /><br />

            <asp:Label ID="lblLastName" runat="server" Text="Last Name" class="QueryLabel"></asp:Label>
            <asp:TextBox ID="txtLastName" runat="server" name="txtLastName" class="QueryBox" ClientIDMode="Static"></asp:TextBox> <br /><br />

jS

  $(document).ready(function(){
            $("#form1").validate({ 
                rules: {      
                    <%=txtEmail.UniqueID %>: {
                        required: true,
                        email: true
                    },
                    <%=txtFirstName.UniqueID %>: {
                        required: true,
                    },
                    <%=txtLastName.UniqueID %>: {
                        required: true,
                    },
                }, messages: {},         
                errorClass: "error-class",
                validClass:"valid_class",
                errorElement: "em",
                success: function(label) {
                    label.addClass("valid_class").append('&#10004;')
                },
            });
        });

CSS 文件

  .error-class {
        color:#ff0000;  
    }

    .valid_class {
        color:#032d3a;
    }

Answer 1

只需添加以下CSS:

.error-class.QueryBox {
    border-color: red;
}