Многошаговая форма с валидатором Parsley при изменении ввода - PullRequest
Новая
       21

Многошаговая форма с валидатором Parsley при изменении ввода

0 голосов
/ 04 апреля 2019

Я пытаюсь использовать Parsley Validator для создания многошаговой формы. То, что я смотрю, это вызвать ошибку / успех при размытии поля ввода. Прямо сейчас я могу запустить проверку только при нажатии на кнопку.

Мой JS выглядит так: 

jQuery(function() {
  $(function () {
	  var $sections = $('.form-block');

	  function navigateTo(index) {
	    // Mark the current section with the class 'current'
	    $sections
	      .removeClass('current')
	      .eq(index)
	        .addClass('current');
	    // Show only the navigation buttons that make sense for the current section:
	    $('.form-navigation .previous').toggle(index > 0);
	    var atTheEnd = index >= $sections.length - 1;
	    $('.form-navigation .next').toggle(!atTheEnd);
	    $('.form-navigation [type=submit]').toggle(atTheEnd);
	  }

	  function curIndex() {
	    // Return the current index by looking at which section has the class 'current'
	    return $sections.index($sections.filter('.current'));
	  }

	  // Previous button is easy, just go back
	  $('.form-navigation .previous').click(function() {
	  	var prevCount = curIndex() - 1;
	    navigateTo(prevCount);
	  });

	  

	  // Next button goes forward iff current block validates
	  $('.form-navigation .next').click(function() {
	    $('.info-form').parsley().whenValidate({
	      group: 'block-' + curIndex()
	    }).done(function() {
	    	// step 2 button add class
	    	var nextCount = curIndex() + 1;
	    	$('.steps li:eq('+ curIndex() +')').removeClass('active');
	    	$('.steps li:eq('+ curIndex() +')').addClass('done');
	    	$('.steps li:eq('+ nextCount +')').addClass('active');
	      navigateTo(nextCount);
	    });
	  });

	  // Prepare sections by setting the `data-parsley-group` attribute to 'block-0', 'block-1', etc.
	  $sections.each(function(index, section) {
	    $(section).find(':input').attr('data-parsley-group', 'block-' + index);
	    // console.log($(section).find(':input'));
	  });
	  navigateTo(0); // Start at the beginning
	});
  
});

, так как мне нужны многоэтапная форма и валидатор одновременно, я не понимаю, как этого добиться.

...