JQuery Set индивидуальный входной цвет границы

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