我有一个多步骤表单,并且我正在使用ParsleyJS来验证表单字段。
<form id="main-form"
action="process.html" method="post" role="form"
data-parsley-validate>
<section id="form-step-1" class="clearfix step1 visible">
step 1
</section>
<section id="form-step-2" class="clearfix step2 hidden">
step 2
</section>
<!-- @@@@@ -->
<!-- Here are unknown amount of sections generated dynamically. -->
<!-- HTML output is generated dynamically and added by jQuery. -->
<!-- I do ajax request and return here HTML code. -->
<section id="form-step-last" class="clearfix step-last hidden">
last step
</section>
</form>
我确实在每个部分中都有正确有效的上一个和下一个按钮,例如:
<span class="btn btn-primary btn-nextstep next" data-current-block="2" data-next-block="3">Next</span>
<span class="btn btn-primary btn-prevstep prev" data-current-block="2" data-next-block="1">Previous<span>
在我的测试案例中,我总共有10个部分,所以它们看起来像:
硬编码步骤:
Step1 -> Step2 ->
然后是动态生成的步骤S3, S4, S5, S6, S7, S8, S9 ->
,最后一步被硬编码为前两个步骤。如果我处于第4步(第4部分)中,然后单击“下一步”按钮,则该按钮不起作用,也不会带我进入第5步(第5部分)。
第四步(第四部分)是动态生成的步骤(部分)中的第二步(第二部分)。
我认为问题出在以下jQuery代码中:
$('#main-form').on('click','.next,.prev', function() {
var current = $(this).data( 'currentBlock' ),
next = $(this).data( 'nextBlock' );
// only validate going forward. If current group is invalid, do not go further
// .parsley().validate() returns validation result AND show errors
if( next > current )
if( false === $('#main-form').parsley().validate( 'step'+current ) )
return;
$('.step' + current).removeClass('visible').addClass('hidden');
$('.step' + next).removeClass('hidden').addClass('visible');
});
我尝试以某些方式调试它,例如。删除
return;
行。结果是它在每个下一步中都添加了
visible
类,但是在到达第4步并单击下一步之后,当前的第4步通常为hidden
类,而下一个第5步通常为visible
类。奇怪的?
我进行了截屏,可以使您更轻松地了解我的问题。
LINK
我已经厌倦了好几个小时,无法找到解决这个问题的方法; /希望你们可以帮助我解决这个奇怪的问题。谢谢。
最佳答案
就像您在评论中陈述的那样,$('#main-form').parsley().validate('step4')
返回false。这是因为step4验证了两个字段而不是1,正如您期望的那样。
在控制台中,如果您编写以下代码:$("[data-parsley-group=step4]")
,您将看到这两个输入字段。在下图中,您可以看到另一个字段位于的DOM:
如您所见,希望在步骤10中验证的名称为“ email_address”的字段实际上在步骤4中得到验证。这是因为属性data-parsley-group="step4"
。如果删除此属性,它将正确验证。
如果遇到类似情况,使用$.listen
是调试正在发生的事情的一种很好的方法。我发现step4正在验证两个字段,因为我添加了以下JS:
$.listen('parsley:field:error', function(parsleyField) {
console.log(parsleyField.$element);
});
这样,您可以在控制台中看到未验证的字段。