parsley.js validation with jquery.inputmask plugin

Stuck a bit with one sort of problem. Can't properly validate the fields of form using parsleyjs and jquery.inputmask

I have several fields with input mask and what I want is just to validate it when the mask is fully filled in and also I have a group of fields that should be validated when each group of fields is filled in either. And you could pay attention that phone field works perfectly like I need (The error is only disappeared when all digits are inside the mask)

Not sure, but I think for single fields the simplest decision is to add minlength to the fields but it doesn't work, don't know why. For the groups of fields have no idea how to handle it. I've put the code below and also a link to jsfiddle.

And here is a jsfiddle to demonstate the 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} 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);

And here is a jsfiddle to demonstate the code https://jsfiddle.net/su3f74cc/32/