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

我正在使用jQuery验证插件来验证我的.net web窗体asp文本字段。验证效果很好，但是我希望通过在字段无效时更改asp文本框的边框颜色来实现更多功能。我看到很多材料都是关于设置错误消息的颜色，而不是文本框字段。某些技能在.Net上不能很好地工作。任何人都知道如何使用JQuery验证插件来实现这一点？jQuery验证插件 - 更改asp文本框的边框颜色

我现在的代码如下：

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 />

$(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; 
    }

来源

2017-02-16 DennisL

只需添加下面的CSS：

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

来源

2017-02-28 22:41:43 kblau

https://jsfiddle.net/kblau237/p64tpjta/ – kblau

谢谢Kblau！很有帮助！ – DennisL

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>

来源

2017-07-01 05:41:35

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

回答

相关问题