Question

我正在使用jQuery验证插件来验证我的.net web表单asp文本字段。验证效果很好，但是一旦字段无效，我想通过更改asp文本框边框颜色来进行更多操作。我看到很多材料都是关于设置错误消息的颜色而不是文本框字段。有些技能与.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;
}

Answer 2

html文件：

<form name="myForm" id="myForm">
<input type="text" name="name" id="name" class="form-control IfErr" placeholder="Enter your name..."><br>
<input type="text" name="email" id="email" class="form-control IfErr" placeholder="Enter your email..."><br>
<input type="text" name="password" id="password" class="form-control IfErr" placeholder="Enter your password..."><br>
<input type="text" name="confirmPassword" id="confirmPassword IfErr" class="form-control" placeholder="Enter your confirm password..."><br>
<input type="text" name="mobile" id="mobile" class="form-control IfErr" placeholder="Enter your mobile number..."><br>
<input type="submit" value="submit" name="submit" class="btn btn-info" >
</form>

CSS文件：

<style>
.error-class {
color:#ff0000;  
}
.valid_class {
color:#032d3a;
}
.error-class.ifErr {
border-color: red;
}
</style>

jquery脚本：

    <script>
    $(function() {

        $("#myform").validate({
          onfocusout: function (element) {
                $(element).valid();
            },
          rules:
          {
              name:
              {
                required:true,
              },
              email:
              {
                required:true,
                email:true
              },
              password:
              {
                required:true
              },
              confirmPassword:
              {
                required:true,
                equalTo:"#password"
              },
              mobile:
              {
                required:true,

              }

          },
          messages: {},

errorClass: "error-class",
validClass:"valid_class",
errorElement:"em",
success: function(label) {
label.addClass("valid_class").append('&#10004;')
},
})
});
<script>

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

2 个答案: