Почему не работает валидация номера телефона?

176

27 марта 2021, 07:40

Ситуация следующая. Валидация номера телефона работает не до конца. Закомментирован код не решает моей проблемы. Если добавить свойство 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" 
});

Answer 1

Можно решить с помощью добавления параметра "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>