Как проверить input на пустоту с помощью jquery

3764

В этой статье рассмотрим, как при нажатии на кнопку с помощью jquery проверить текстовое поле input на пустоту и вывести предупреждение, если это поле не заполнено.

Код примера:

<input type="text" id="name" placeholder="имя" name="name">
<span class="warning" style="display:none">заполните это поле</span>
<div class="btn">отправить</div>
<script>
$('.btn').click(function() {// при клике по кнопке
if( !$('#name').val()) { //проверяем на заполнение инпут
$('#name').css('border','2px solid red');// подсвечиваем его красным, если пустой
$('.warning').css('display','block'); // отображаем ворнинг
}
});
$('#name').keyup(function() { // при наборе текста
$('#name').css('border','1px solid #ddd'); // снимаем подсветку
$('.warning').css('display','none'); // скрываем ворнинг
});
</script>
<style>
.btn {
background: #2196f3;
margin: 20px 0px;
color: #fff;
}
.warning {
color:red
}
</style>

Демо

отправить

Добавить комментарий

Ваш адрес email не будет опубликован.

*
code