• Если Вы желаете разместить текстовую рекламу или баннер на нашем форуме, пишите в обратная связь

Валидация полей при вводе Jquery

Kylaksizov

Администратор
#1
Решил сделать без плагинов проверку полей, но этот метод достаточно примитивный и нужно знать синтаксис регулярных выражений.

Результат
Screenshot_2.png

CSS
CSS:
.err{
  background: #fff;
  padding: 5px;
  font-size: 13px;
  position: absolute;
  top: 10px;
  right: 105%;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px #ccc solid;
  box-shadow: 0 3px 5px #00000047;
  display: none;
}

.err:before{
  content: "";
  border: 10px solid transparent;
  border-left: 11px solid #fff;
  position: absolute;
  top: 5px;
  right: -20px;
  z-index: 20;
}

.err:after{
  content: "";
  border: 10px solid transparent;
  border-left: 11px solid #c5c5c5;
  position: absolute;
  top: 5px;
  right: -21px;
  z-index: 10;
}
HTML
HTML:
<div class="pr">
    <input type="text" name="tel" required>
    <div class="err tel_v"></div>
</div>
Jqury
JavaScript:
$('[name="tel"]').on('keyup',function(){
    var tel = $(this).val();
    if(!tel.match(/^\d{10}$/)) $(".tel_v").fadeIn().html('Не совпадает с форматом 9xxxxxxxxx!');
    else $(".tel_v").fadeOut().html('');
});
Примитивно и быстро, надеюсь кому-то пригодится.