我正在尝试使用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
});
});
由于我同时需要多步表单和验证程序,因此我很困惑如何实现这一目标。