Подсветка полей ввода красным, когда они не заполнены

412

08 февраля 2017, 23:04

Есть такая проблема: не могу задать полям ввода красную границу, когда они не заполнены. Надо сделать это с помощью js, но мой скрипт не работает. Вот сам код. Вся проблема в скрипте, где я сначала пытаюсь проверить пусто ли поле и если да, то присваиваю ему класс с красной границей.

$('document').ready(function() { 
  $('#button').on('click', function() { 
    console.log(32) 
    if ($('.rfield').val() != '') { 
      // Если поле не пустое удаляем класс-указание 
      $('.rfield').removeClass('empty_field'); 
    } else { 
      // Если поле пустое добавляем класс-указание 
      $(this).addClass('empty_field'); 
    } 
  }); 
});

.empty-field { 
  border: 2px red; 
} 
.form_box { 
  width: 300px; 
  margin: 40px auto; 
} 
.form_box label { 
  font-size: 13px; 
  font-weight: bold; 
  color: #444444; 
  display: block; 
} 
.form_box input { 
  display: block; 
  border: 2px solid #cfcfcf; 
  font-size: 14px; 
  color: #444444; 
  padding: 7px 7px 8px; 
  width: 250px; 
  margin-bottom: 20px; 
  transition: all 0.5s; 
  -webkit-transition: all 0.5s; 
  -moz-transition: all 0.5s; 
} 
.form_box input:focus { 
  outline: none; 
  border-color: #07a6e6; 
} 
.form_box .btn_submit { 
  border: none; 
  width: 180px; 
  text-align: center; 
  background: #07a6e6; 
  font-size: 13px; 
  font-weight: bold; 
  color: #ffffff; 
  cursor: pointer; 
  height: 35px; 
  line-height: 28px; 
  padding: 0; 
} 
.form_box .btn_submit:hover { 
  background: #009ac2; 
} 
.form_box .btn_submit:active { 
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); 
} 
.form_box .btn_submit.disabled, 
.form_box .btn_submit.disabled:hover { 
  background: #afdde6; 
  cursor: default; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<div class="form_box"> 
 
  <label for="user_name">Имя пользователя:</label> 
  <input type="text" class="rfield" id="user_name" /> 
 
  <label for="user_family">Фамилия пользователя</label> 
  <input type="text" class="rfield" id="user_family" /> 
 
  <label for="user_phone">Телефон пользователя:</label> 
  <input type="text" class="rfield" id="user_phone" /> 
 
  <label for="user_work">Профессия пользователя:</label> 
  <input type="text" class="rfield" id="user_work" /> 
 
  <button type="submit" id="button" class="btn_submit disabled">Submit</button> 
</div>

Answer 1

Опечатка: empty_field != empty-field.
Каждый input надо проверять индивидуально: $('.form_box .rfield').each(function() {...
Декларация класса .empty_field должна быть более конкретной, чем .form_box input.

<!DOCTYPE html> 
<html> 
 
<head> 
  <title>rg</title> 
</head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<body> 
  <style type="text/css"> 
    .form_box input.empty_field { 
      border-width: 2px; 
      border-color: red; 
    } 
    .form_box { 
      width: 300px; 
      margin: 40px auto; 
    } 
    .form_box label { 
      font-size: 13px; 
      font-weight: bold; 
      color: #444444; 
      display: block; 
    } 
    .form_box input { 
      display: block; 
      border: 2px solid #cfcfcf; 
      font-size: 14px; 
      color: #444444; 
      padding: 7px 7px 8px; 
      width: 250px; 
      margin-bottom: 20px; 
      transition: all 0.5s; 
      -webkit-transition: all 0.5s; 
      -moz-transition: all 0.5s; 
    } 
    .form_box input:focus { 
      outline: none; 
      border-color: #07a6e6; 
    } 
    .form_box .btn_submit { 
      border: none; 
      width: 180px; 
      text-align: center; 
      background: #07a6e6; 
      font-size: 13px; 
      font-weight: bold; 
      color: #ffffff; 
      cursor: pointer; 
      height: 35px; 
      line-height: 28px; 
      padding: 0; 
    } 
    .form_box .btn_submit:hover { 
      background: #009ac2; 
    } 
    .form_box .btn_submit:active { 
      box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); 
    } 
    .form_box .btn_submit.disabled, 
    .form_box .btn_submit.disabled:hover { 
      background: #afdde6; 
      cursor: default; 
    } 
  </style> 
  <div class="form_box"> 
 
    <label for="user_name">Имя пользователя:</label> 
    <input type="text" class="rfield" id="user_name" /> 
 
    <label for="user_family">Фамилия пользователя</label> 
    <input type="text" class="rfield" id="user_family" /> 
 
    <label for="user_phone">Телефон пользователя:</label> 
    <input type="text" class="rfield" id="user_phone" /> 
 
    <label for="user_work">Профессия пользователя:</label> 
    <input type="text" class="rfield" id="user_work" /> 
 
    <button type="submit" id="button" class="btn_submit disabled">Submit</button> 
  </div> 
</body> 
<script type="text/javascript"> 
  $('document').ready(function() { 
    $('#button').on('click', function() { 
      $('.form_box .rfield').each(function() { 
        if ($(this).val() != '') { 
          console.log(32); 
          // Если поле не пустое удаляем класс-указание 
          $(this).removeClass('empty_field'); 
        } else { 
          console.log(33); 
          // Если поле пустое добавляем класс-указание 
          $(this).addClass('empty_field'); 
        } 
      }); 
    }); 
  }); 
</script> 
 
</html>

Answer 2

Предлагаю вам воспользоваться валидацией из коробки. HTML5 имеет нужные атрибуты для инпутов, а именно required в данном случае; также нам понадобится псевдокласс :invalid в CSS. Единственный минус такой валидации в том, что она происходит всегда, а не только после сабмита формы. Для того, чтобы этого избежать, надо после нажатия на кнопку всем инпутам с атрибутом required добавить класс req. А в CSS этому классу задать .req:invalid — и валидация на пустое значение инпута готова. Также можно добавить стили для правильно заполненных инпутов при помощи .req:valid.

$('document').ready(function() { 
  $('#button').on('click', function() { 
    $('input[required]').addClass('req'); 
  }); 
});

.form_box { 
  width: 300px; 
  margin: 40px auto; 
} 
.form_box label { 
  font-size: 13px; 
  font-weight: bold; 
  color: #444444; 
  display: block; 
} 
.form_box input { 
  display: block; 
  border: 2px solid #cfcfcf; 
  font-size: 14px; 
  color: #444444; 
  padding: 7px 7px 8px; 
  width: 250px; 
  margin-bottom: 20px; 
  transition: all 0.5s; 
  -webkit-transition: all 0.5s; 
  -moz-transition: all 0.5s; 
} 
.form_box .req:invalid { 
  border: 2px solid red; 
} 
.form_box .req:valid { 
  border: 2px solid green; 
} 
.form_box input:focus { 
  outline: none; 
  border-color: #07a6e6; 
} 
.form_box .btn_submit { 
  border: none; 
  width: 180px; 
  text-align: center; 
  background: #07a6e6; 
  font-size: 13px; 
  font-weight: bold; 
  color: #ffffff; 
  cursor: pointer; 
  height: 35px; 
  line-height: 28px; 
  padding: 0; 
} 
.form_box .btn_submit:hover { 
  background: #009ac2; 
} 
.form_box .btn_submit:active { 
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.2); 
} 
.form_box .btn_submit.disabled, 
.form_box .btn_submit.disabled:hover { 
  background: #afdde6; 
  cursor: default; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<div class="form_box"> 
 
  <label for="user_name">Имя пользователя:</label> 
  <input type="text" class="rfield" id="user_name" required /> 
 
  <label for="user_family">Фамилия пользователя</label> 
  <input type="text" class="rfield" id="user_family" required /> 
 
  <label for="user_phone">Телефон пользователя:</label> 
  <input type="text" class="rfield" id="user_phone" required /> 
 
  <label for="user_work">Профессия пользователя:</label> 
  <input type="text" class="rfield" id="user_work" required /> 
 
  <button type="submit" id="button" class="btn_submit disabled">Submit</button> 
</div>