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