Проверка ввода номера и маска телефона через jquery

Часто создавая форму обратной связи на сайте, которая содержит номер телефона, возникает проблема в том, что пользователь может записать в это поле что угодно, к примеру, набор цифр.

И хочется сделать проверку на это поле, чтобы потенциальный клиент вбил действительно свой номер или хотябы в нужном формате.

Рассмотрим, как реализовать такое поле.

Демо Попробуйте ввести и нажать отправить

Добавлена маска по телефону, а также её валидация, при попытки отправить форму, если поле не корректное, то будет ошибка или же пользовать сбросил фокус. Форма отправиться если поле валидное и ошибка пропадёт.

Для реализации нам понадобиться две библиотеки на jquery:

• jquery.inputmask - для наложение маски телефона
• jquery-validate - для проверки и валидации поля

Скачать их или подключить можно отсюда:

jquery.inputmask jquery.validate

Сначала подключим jquery и библиотеки:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.5/jquery.inputmask.min.js"></script>

Теперь добавим форму с полем:

<form class="form-request">
  <label>
    <input 
        type="text" 
        class="phone-field"
        name="phone" 
        placeholder="Номер телефона" 
        data-rule-required="true" 
        data-rule-minlength="10" 
        data-msg="Введите номер телефона"
    />
  </label>
  <div>
    <input type="submit" value="Отправить">
  </div>
</form>

Затем пишем следующий скрипт.

<script type="text/javascript">
    // вешаем маску на телефон
    $('.phone-field').inputmask("+7(999)999-9999");
    
    // добавляем правило для валидации телефона
    jQuery.validator.addMethod("checkMaskPhone", function(value, element) {
        return /\+\d{1}\(\d{3}\)\d{3}-\d{4}/g.test(value); 
    });
    
    // получаем нашу форму по class
    var form = $('.form-request');
    
    // включаем валидацию в форме
    form.validate();
    
    // вешаем валидацию на поле с телефоном по классу
    $.validator.addClassRules({
        'phone-field': {
            checkMaskPhone: true,
        }
    });
    
    // Проверка на валидность формы при отправке, если нужно
    form.submit(function(e){
        e.preventDefault();
        if (form.valid()) {
            alert('Форма отправлена');
        }
        return;
    });
</script>

После этого вы получите поле, которые было приведено выше. Обратите внимание, что вы можете менять формат на любой вам нужный.