Плагин проверки JQuery - изменить цвет границы текстового поля asp

Question

Я использую плагин проверки jQuery для проверки текстовых полей asp. NET. Валидация работает хорошо, но я хочу немного больше, изменив цвет рамки asp textbox после того, как поле недействительно. Я вижу, что многие материалы касаются установки цвета сообщения об ошибке, но не поля текстового поля. Некоторые навыки не очень хорошо работают с .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>