Question

我有一个带有错误验证的多步骤表单，当前如果有错误，表单会跳回到第一个div而不是实际错误。

如果触发错误，我希望每个步骤都自动展开并显示。

总共有六个步骤，所有步骤都具有相同的“步骤”类名。 “下一个”按钮循环显示，直到交换为提交按钮的最后一步。

错误验证是在下次提交时完成的。

更新：缩短代码并清理示例。

使用Javascript：

<script>
    $(document).ready(function(){
    var current = 1;

    widget      = $(".step");
    btnnext     = $(".next");
    btnback     = $(".back"); 
    btnsubmit   = $(".submit");

    // Init buttons and UI
    widget.not(':eq(0)').hide();
    hideButtons(current);
    setProgress(current);

    // Next button click action
    btnnext.click(function(){
        if(current < widget.length){
            // Check validation
            if($(".form").valid()){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })

    // Back button click action
    btnback.click(function(){
        if(current > 1){
            current = current - 2;
            if(current < widget.length){
                widget.show();
                widget.not(':eq('+(current++)+')').hide();
                setProgress(current);
            }
        }
        hideButtons(current);
    })

$("form").submit(function () {
        if (!$(this).valid()) {
            $('.step').show();
        }
    }); 

});

// Hide buttons according to the current step
hideButtons = function(current){
    var limit = parseInt(widget.length); 

    $(".action").hide();

    if(current < limit) btnnext.show();
    if(current > 1) btnback.show();
    if (current == limit) { 
        btnnext.hide(); 
        btnsubmit.show();
    }
}
</script>

示例（缩减）形式：

<form name="form" method="post" class="form">
<div class="step">
<h2>Apply now</h2>

<label>Cover Amount</label>
<?= $form->CoverAmount->render_input() ?>
</div>

<div class="step">
<h2>Where do you live?</h2>

<label>Cover Amount</label>
<?= $form->CoverAmount->render_input() ?>
</div>

<div class="step">
<h2>Nearly there...</h2>

<p>...</p>
</div>

<br />

<button type="button" class="action next btn btn-primary">Next</button>
<a href="javascript: submitform()" type="button" class="action submit btn btn-success" name="stage" value="2">Apply Now</a>

<script type="text/javascript">
function submitform()
{
  document.<?= $form->get_form_name() ?>.submit();
}
</script>
</form>

如果无效，取消隐藏所有多步形式的div

0 个答案: