css проверки для блоков выбора

Question

Я только что завершил проверку формы, и мы запускаем css на элементах ввода и т. Д., Если они не проверяются.

Но не уверен, как бороться с этим для элементов, кроме ввода.

Например, выбирает и радио, и флажки.

Обычно наши js для этого:

Для поля электронной почты.

if(email == "") $('#email').css({"background":"#efefef","border":"1px solid #F12B63"});

просто не уверен, почему проверка css (ошибка) не работает на выбранных элементах радио и флажки ... любые предложения. Валидация работает, только не css часть

Answer 1

Попробуйте вместо этого использовать атрибут структуры: http://jsfiddle.net/Kqcx7/1/

Answer 2

Опция 1: Вы можете изменить цвет метки вместо изменения границы ввода.

Опция 2: Используйте javascript, css и изображения, чтобы изменить внешний вид флажков иРадио-кнопки.Есть много учебников.

Допустим, у вас есть эта форма:

<form method="post" action="/path/to/action" id="exampleForm">
  <div id="fullNameBlock">
    <label>Full Name:</label><input type="text" value="" name="fullname" >
  </div>
  <div id="emailBlock">
    <label>Email:</label><input type="text" value="" name="email" >
  </div> 
  <input type="submit" value="Send" >
</form>

, и пусть вы подтвердите при отправке:

if( !validate() ) {

}

и ваш адрес электронной почты будет неправильным.Один из вариантов - сделать что-то вроде этого:

$("#emailBlock").find("label").css({color: "red"});

Также вы можете добавить скрытое сообщение под входом:

<div id="emailBlock">
  <label>Email:</label><input type="text" value="" name="email" > <br>
  <span style="display:none;">Your email is invalid</span>
</div> 

и показать сообщение при возникновении ошибки:

$ ("# emailBlock"). Find ("span"). Show ();

Вы можете проверить эти руководства для пользовательских флажков и переключателей:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/ http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/ http://www.dailycoding.com/Posts/customized_html_controls_creating_custom_checkbox.aspx http://blogs.digitss.com/javascript/jquery-javascript/jquery-fancy-custom-radio-and-checkbox/

Answer 3

Свойство border не будет работать для всех элементов формы. Вы должны добавить оболочку span / div вокруг полей выбора. Альтернативный подход заключается в использовании свойства структуры.

Answer 4

Используя Jquery, вы можете просто изменить границу выбора (выпадающего) ввода.

$('#selectId').parent().css('border-color','red');