parsley.js проверка с помощью jquery.inputmask plugin

Question

Застрял немного с одной проблемой. Не удается корректно проверить поля формы с помощью parsleyjs и jquery.inputmask

У меня есть несколько полей с маской ввода, и я хочу только проверить ее, когда маска полностью заполнена, а также у меня есть группа полей которые должны быть проверены, когда каждая группа полей заполняется. И вы могли бы обратить внимание на то, что телефонное поле работает отлично, как мне нужно (ошибка исчезла только тогда, когда все цифры находятся внутри маски)

Не уверен, но я думаю, что для одиночных полей самым простым решением является добавление minlength в но это не работает, не знаю почему. Для групп полей не знаю, как с этим справиться. Я поставил код ниже, а также ссылку на jsfiddle.

А вот jsfiddle в продемонстрировать режим Кодекса https://jsfiddle.net/su3f74cc/32/

HTML:

<form action="" class="form form-style1 create-account"> 
    <fieldset class="form__step"> 
     <p class="form__wrap"> 
      <label for="">Phone</label> 
      <input type="text" class="form__input" data-type="phone" data-parsley-pattern="^[\d\+\-\.\(\)\/\s]*$" placeholder="" required=""> 
     </p> 
     <p class="form__wrap"> 
      <label for="">Passport ID</label> 
      <input type="text" class="form__input" data-parsley-pattern="^\{7}$" data-type="passport" data-parsley-minlength="9" placeholder="" required=""> 
     </p> 
     <p class="form__wrap row"> 
      <span class="col-sm-4 col-xs-8 col-xs-push-0"> 
         <label for="">Date from</label> 
         <span class="date-custom"> 
         <input type="text" class="form__input day" data-type="month" minlength="1" maxlength="2" placeholder="" data-parsley-type="digits" data-parsley-range="[1, 31]" required=""> 

         <input type="text" class="form__input month" data-parsley-type="digits" data-type="month" data-parsley-range="[1, 12]" minlength="1" maxlength="2" placeholder="" required=""> 

         <input type="text" class="form__input year" data-type="year" minlength="4" maxlength="4" placeholder="" data-parsley-type="digits" required=""> 
         </span> 
      </span> 
      <span class="col-sm-4 col-sm-push-1 col-xs-8 col-xs-push-0"> 
         <label for="">Date to</label> 
         <span class="date-custom"> 
         <input type="text" class="form__input day" data-type="month" minlength="1" maxlength="2" data-parsley-range="[1, 31]" placeholder="" data-parsley-type="digits" required=""> 
         <input type="text" class="form__input month" data-type="month" maxlength="10" placeholder="" data-parsley-range="[1, 12]" data-parsley-type="digits" required=""> 
         <input type="text" class="form__input year" data-type="year" minlength="1" data-parsley-type="digits" maxlength="4" placeholder="" required=""> 
         </span> 
      </span> 
     </p> 
     <p class="form__wrap"> 
      <label for="">ID</label> 
      <input type="numbers" class="form__input" placeholder="" data-type="ident" required=""> 
     </p> 
    </fieldset> 

    <div class="form__navigation"> 
     <p class="form-error-text hide">Ошибка при заполнении полей</p> 
     <p class="text-center"> 
      <input type="submit" value="Submit" class="btn btn-xlg btn-flat btn-color1"> 
     </p> 
    </div> 
</form> 

CSS:

.form__step { 
    display: block; 
    width: 100%; 
} 
.form-error label { 
    color: red; 
} 
.form-error-text span { 
    display: inline-block; 
    color: red; 
    padding: 0 10px; 
} 

JS:

(function($, window) { 
    'use strict'; 

$('input[data-type="phone"]').inputmask({"mask": "+375-99-999-99-99"}); 
$('input[data-type="numbers"]').inputmask("9{14}"); 
$('input[data-type="year"]').inputmask("9{4}"); 
$('input[data-type="month"]').inputmask("9{2}"); 
$('input[data-type="passport"]').inputmask("aa9{7}"); 
$('input[data-type="ident"]').inputmask({"mask":"9{7} a 9{3} aa 9"}); 

var $navigation = $('.form .form__navigation'), 
    $form = $('.create-account'), 
    $sections = $('.form .form__step'), 
    $formErrorText = $('.form .form-error-text'), 
    listOfErrorLabels = []; 
    window.Parsley.on('field:error', fieldInstance => { 
    let arrErrorMsg = ParsleyUI.getErrorsMessages(fieldInstance); 
    let errorMsg = arrErrorMsg.join(';'); 
    let fieldName = fieldInstance.$element.parents('.form__wrap').find('label').text(); 
    listOfErrorLabels.push(fieldName); 
    listOfErrorLabels = _.union(listOfErrorLabels); 
    }); 

    $navigation.on('click', 'input[type="submit"]', e => { 
    e.preventDefault(); 
    listOfErrorLabels.length = 0; 

    if ($form.parsley({ 
     successClass: 'form-success', 
     errorClass: 'form-error', 
     classHandler: function (el) { 
     return el.$element.parents('.form__wrap'); 
     }, 
     errorsWrapper: '', 
     errorsContainer: function(parsleyField) {} 
    }).validate({group: 'block-0'})) { 
      // do something 
    } 

    // check if there are any errors 
    // if yes then show a error text with list of field that are missed 
    if (listOfErrorLabels.length > 0) { 
     let updatedList = listOfErrorLabels.reduce((template, text, index) => { 
      return template = `${template} &nbsp;<span>${text}</span>&nbsp;`; 
     }, ''); 
     $formErrorText.addClass('show').html(`Errors ${updatedList}`); 
    } else { 
     $formErrorText.removeClass('show'); 
    } 
    }); 

    $sections.each((index, section) => { 
    $(section).find(':input').attr('data-parsley-group', 'block-' + index); 
    }); 

})(jQuery, window); 

А вот jsfiddleс указанием кода https://jsfiddle.net/su3f74cc/32/

Answer 1

This is a known issue of maskedinput.

Я рекомендую переключиться на inputmask с маску, похоже, больше не поддерживает; PR, который я сделал для решения этой проблемы, не был объединен.

Быстрый хак, который может работать для вас:

$(document).on('keypress', function(evt) { 
    if(evt.isDefaultPrevented()) { 
    // Assume that's because of maskedInput 
    // See https://github.com/guillaumepotier/Parsley.js/issues/1076 
    $(evt.target).trigger('input'); 
    } 
});