0

Ситуация следующая. Валидация номера телефона работает не до конца. Закомментирован код не решает моей проблемы. Если добавить свойство minlength, то даже при вводе хоть одного символа форма считается валидная. Если добавить свойство number, то даже если заполнить все символы, валидация проходить не будет. Помогите пожалуйста в решении этой проблемы.
Форма в самом низу

// Validation input number phone
// https://github.com/RobinHerbots/inputmask
$(document).ready(function(){
    $('.input-tel').inputmask("+7(999)999-99-99");
});


// Validation form
// https://jqueryvalidation.org
$("#contacts-form").validate({

    rules: {
        input_name: {
            required: true
        },
        input_tel: {
            required: true,
            //minlength: 10,
            //number: true
        },
        input_email: {
            email: true
        },
        "contacts_check_accept[]": {
            required: true,
            minlength: 1
        },
    },
    messages: {
        input_name: {
            required: "Это поле обязательно к заполнению",
        },
        input_tel: {
            required: "Это поле обязательно к заполнению",
        },
        input_email: {
            email: "Введите пожалуйста корректный e-mail"
        },
        "contacts_check_accept[]": "Согласитесь с Политикой конфеденциальности"
    },
    focusCleanup: true,
    focusInvalid: false,
    errorClass: "form__input_error",
    validClass: "form__input_success"
});

1 ответ 1

0

Можно решить с помощью добавления параметра "clearIncomplete". Примерно так:

$(document).ready(function(){
 //$('.input_tel').inputmask({"mask": "(999) 999-9999"});
 $(".input_tel").inputmask("+7(999)999-99-99",{ "clearIncomplete": true });
   jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
submitHandler: function(form) {
    //$('#myform').ajaxSubmit();
    alert('asd');
  },
  rules: {
    input_tel: {
      required: true,
     // number: true,
      //minlength: 3
    }
  }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jquery.inputmask.bundle.js"></script>
<form action="#" id="myform">
  <input type="text" class="input_tel" name="input_tel">
  <button type="submit">Submit</button>
</form>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.