输入更改时使用Parsley验证程序的多步骤表单

时间:2019-04-04 18:32:03

标签: javascript validation parsley.js

我正在尝试使用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
	});
  
});

由于我同时需要多步表单和验证程序,因此我很困惑如何实现这一目标。

0 个答案:

没有答案