JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.1/jquery.inputmask.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.3.13/parsley.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.13.1/lodash.min.js"></script>
<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">
        ...

CSS

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

JavaScript

(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);