jQuery: после ошибки проверки моя функция Input Mask не работает в поле

Question

Я использую JQuery для успешной проверки моей формы.

Я добавил введенный в масках ввод в поле даты рождения в моей форме. Маскированный входной плагин от: https://github.com/RobinHerbots/jquery.inputmask

При загрузке поле даты рождения имеет замаскированный вход, работающий должным образом. Если форма отправлена ​​и проверка не удалась в этом поле других полей в форме: поле даты рождения лишено маскированных разделителей символов, и вложенные маски не работают.

Я использую jQuery, jQuery validate plugin, маску ввода от https://github.com/RobinHerbots/jquery.inputmask и Bootstrap.

Вот немного моей формы, которая показывает поле даты рождения. У моей формы тоже много других полей.

<form name="add_contact_quick" id="add_contact_quick" method="POST" class="horizontal-form"> 
     <div class="form-body"> 

     <div class="alert alert-danger display-hide"> 
      <button class="close" data-close="alert"></button> 
       You have some form errors. Please check below. 
     </div> 
     <div class="alert alert-success display-hide"> 
      <button class="close" data-close="alert"></button> 
       Your form validation is successful! 
     </div> 
    <div class="col-md-12"> 
     <div class="form-group"> 
     <label class="control-label">Date of Birth</label> 
     <div class="input-icon right"> 
      <i class="fa"></i> 
      <input id="birthdate" name="birthdate" type="text" class="form-control"> 
     </div> 
     </div> 
    </div> 

      <div class="modal-footer form-actions right"> 
           <button type="button" class="btn default" data-dismiss="modal">Cancel</button> 
           <button type="submit" class="btn blue"><i class="fa fa-check"></i> Save</button> 
          </div 
      </form> 

Вот мой javascript, который будет проверять форму и показывать ошибки, если проверка не удалась.

<script> 

$(document).ready(function() { 

     var form = $('#add_contact_quick'); 
     var error = $('.alert-danger', form); 
     var success = $('.alert-success', form); 

     $('#add_contact_quick').validate({ 
       errorElement: 'span', //default input error message container 
       errorClass: 'help-block help-block-error', // default input error message class 
       focusInvalid: true, // do not focus the last invalid input 
       ignore: "", // validate all fields including form hidden input 
       rules: { 
        friends_call_me: { 
         required: true 
        }, 
        first: { 
         required: true 
        }, 
        last: { 
         required: true 
        }, 
        email: { 
         email: true 
        }, 
        birthdate: { 
         date: true 
        } 
       }, 

       invalidHandler: function (event, validator) { //display error alert on form submit    
          success.hide(); 
          error.show(); 
          Metronic.scrollTo(error, -200); 
       }, 

       errorPlacement: function (error, element) { // render error placement for each input type 
          var icon = $(element).parent('.input-icon').children('i'); 
          icon.removeClass('fa-check').addClass("fa-warning"); 
          icon.attr("data-original-title", error.text()).tooltip({'container': 'body'}); 
       }, 


       highlight: function (element) { // hightlight error inputs 
          $(element) 
           .closest('.form-group').removeClass("has-success").addClass('has-error'); // set error class to the control group 
       }, 

       unhighlight: function (element) { // revert the change done by highlight 

       }, 

       success: function (label, element) { 
        var icon = $(element).parent('.input-icon').children('i'); 
        $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); // set success class to the control group 
        icon.removeClass("fa-warning").addClass("fa-check"); 
       }, 

       submitHandler: function(form) { 
        //form[0].reset(); 
        success.show(); 
        error.hide(); 
        Metronic.scrollTo(success, -200); 
        $.ajax({ 
         url: "ajax_insert.php?table=contacts", 
         type: form.method, 
         data: $(form).serialize(), 
         success: function(response) { 
           //response here if data response 
          if (response.redirect) { 
           // data.redirect contains the string URL to redirect to 
            window.location.href = reponse.redirect; 
            } 
         }   
        }); 

       } 

     }); 
    $("#birthdate").inputmask("99/99/9999"); 

}); 

</script> 

Мне нужен способ сохранить эту маску в поле ввода, если проверка не удалась. Я смущен, почему маска ввода полностью удаляется из поля ввода только потому, что проверка не выполняется!

Любое значение, введенное в поле ввода даты рождения, лишено его маски ввода, и я просто остаюсь с цифрами. Когда я снова пытаюсь изменить поле даты рождения, маска ввода не применяется, как при загрузке страницы.

Answer 1

Спасибо, что комментировали это.

Это сводило меня с ума.

Я принял ваше предложение и сделал скрипку.

jsfiddle.net/epyo7gn5/

Самое интересное в том, что я делал на скрипке, он РАБОТАЛ!

Это заставило меня понять, что плагин inputmask, который я использовал, был более старой версией. Использование обновленного плагина решило всю проблему.

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

Спасибо.

Answer 2

Привет, ребята, у меня была такая же проблема, но когда я обновил библиотеку от https://github.com/RobinHerbots/jquery.inputmask, проблема решена.

Привет