Подсказки при валидации формы + Kube css

295

18 января 2018, 19:07

Как сделать, чтобы span error высвечивался если поле пустое и высвечивался span sucsess если поле заполнено?

Answer 1

Думаю, это реализуется далеко не на CSS3, а на JS. Вот пример реализации с использованием jQuery:

$('input#foo').on('keyup', function() { 
  var $this = $(this); 
  if (this.value.length === 0) { 
    $('.success').hide(); 
    $('.error').show(); 
    $this.removeClass("active-success"); 
    $this.addClass("active-error"); 
  } else { 
    $('.error').hide(); 
    $('.success').show(); 
    $this.removeClass('active-error'); 
    $this.addClass("active-success"); 
  } 
});

.active-error { 
  box-shadow: 0 0 0px 4px #ed1c24; 
} 
 
.active-success { 
  box-shadow: 0 0 0px 4px #22b14c; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<input type="text" id="foo">     
<span class="error" style="display: none;">Ошибка</span> 
<span class="success" style="display: none;">Успешно</span>