Jquery设置单独的输入边框颜色

Question

是否可以使用jquery设置特定输入框的颜色？

我想设置一个边框为红色，如果它失败了我写的一些验证，并且如果它很好就把它变回黑色。

任何方式来做到这一点？

Answer 1

为什么人们总是想写自己的代码，他们认为自己是程序员; ^）你应该考虑validation plugin

我会做类似

$('#item_id').addClass('errorClass'); 

，这是您可以添加把它所有类和交换需要

Answer 2

在您的验证码，将现场与您的验证码错误

$('#afieldID').addClass("error"); 

，没有错误设置字段

$('#afieldID').removeClass("error"); 

样式代码

.error { 
    border: solid 2px #FF0000; 
} 

Answer 3

最好的办法是进行您的验证，并添加一个类的每个元素没有通过。这将保持形式和内容的清晰分离。

假设下面的形式：

<form id="myAwesomeForm"> 
    <input type="text" id="A" name="A"/> 
    <input type="text" id="B" name="B"/> 
    <input type="text" id="C" name="C"/> 
</form> 

您可以添加一个“上提交”处理程序，对数据进行验证这种方法（假设你定义一个函数isFieldValid的地方，决定其有效性）：

;(function ($) { 

    // When the document is ready... 
    $(document).ready(function() { 
    // ... put a "submit" trigger on the form that checks data. 
    $("#myAwesomeForm").submit(function() { 

     // Make a list of the input fields we care about. 
     var fieldList = ['A', 'B', 'C']; 
     var areAllFieldsValid = true; 

     // Loop through the inputs we care about 
     for(var i = 0; i < fieldList.length; i++) { 

     // Test for validity based on some function you defined somewhere. 
     if (!isFieldValid("#A")) { 
      // Mark this field as having invalid-data (and anything else 
      // you want to do here). 
      $("#A").addClass("invalid-data"); 
      // Make a note that we hit a false field so we can abort the submit. 
      areAllFieldsValid = false; 
     } 
     } 

     // Return true/false depending on whether we got invalid 
     // data. If this is false, the submit will be aborted. 
     return areAllFieldsValid; 
    }); 
    }); 

})(jQuery); 

然后你只需要在你的文件中定义的CSS类：

/* My CSS file */ 
.invalid-data { border: 1px solid red; }