jquery - jQuery 智能向导步骤验证

Question

我正在使用 jQuery Smart Wizard 在每个步骤中保存一个表单，我有一些输入字段。我想在进行下一步之前验证每个字段。请帮助我如何实现它。

这是我的 jQuery：

$('#smartwizard').smartWizard({ 
    selected: 0, 
    theme: 'default',
    transitionEffect:'fade',
    showStepURLhash: true,
    toolbarSettings: {toolbarPosition: 'bottom',
    toolbarExtraButtons: [btnFinish, btnCancel]
    }
});

Answer 1

您可以在单击下一步时检查表格是否有效。

$(document).ready(function() {
    $('#smartwizard').smartWizard({ 
        onLeaveStep:leaveAStepCallback,
        onFinish:onFinishCallback
    });

    $("form").validate({
        rules: {
            'student[business_representative_attributes][first_name]': 'required'
        },
        messages: {
            'student[business_representative_attributes][first_name]': 'Please enter first name'
        }
    });
});

function leaveAStepCallback(obj, context){
    alert("Leaving step " + context.fromStep + " to go to step " + context.toStep);
    // return false to stay on step and true to continue navigation 
    if ($('form').valid()) {
        return true;
    } else {
        return false; 
    }
}

智能精灵 4

$("#smartwizard").on("leaveStep", function(e, anchorObject, stepNumber, stepDirection) {
     return confirm("Do you want to leave the step "+stepNumber+"?");
});