javascript - parsley.js validation with jquery.inputmask plugin -

stuck bit 1 sort of problem. can't validate fields of form using parsleyjs , jquery.inputmask

i have several fields input mask , want validate when mask filled in , have group of fields should validated when each group of fields filled in either. , pay attention phone field works need (the error disappeared when digits inside mask)

not sure, think single fields simplest decision add minlength fields doesn't work, don't know why. groups of fields have no idea how handle it. i've put code below , link jsfiddle.

and here jsfiddle demonstate code 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} 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'})) {             //      }      // check if there errors      // if yes show error text list of field 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); 

and here jsfiddle demonstate code https://jsfiddle.net/su3f74cc/32/

this known issue of maskedinput.

i recommend switching inputmask since jquery.input mask seems no longer maintained; pr i've made address issue has not been merged.

a quick hack work you:

$(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');   } });