如何逐步验证表单（3 个步骤）进入轮播？

【问题标题】：How to validate a form step-by-step (3 steps) into a carousel?如何逐步验证表单（3 个步骤）进入轮播？
【发布时间】：2013-12-20 08:56:24
【问题描述】：

我需要在轮播中分三个步骤构建一个表单。我正在使用引导程序创建网站，但我不知道如何在不提交数据的情况下验证表单的一个步骤，并且在向用户显示第二步（或第二张幻灯片）后继续填写表单直到第三步（或第三张幻灯片）何时可以提交数据。有人有想法吗？

【问题讨论】：

【解决方案1】：

您可能只想在本地验证表单的字段。

您可以将onsubmit 事件监听器绑定到表单元素，当用户提交数据时触发。由于您要逐步验证表单，您只需在每个步骤中验证当前步骤的字段，您应该使用event.preventDefault() 停止在第一步和第二步中提交数据。代码可能喜欢：

ndForm.addEventListener('submit', function(e) {
    if (!checkSteps()) {
        e.preventDefault();
    }
});

或者您可以在用户修改后立即验证该字段；例如将onblue 事件监听器附加到文本字段以处理用户的输入。

我更喜欢第一种方式，因为代码更清晰，更易于维护。

【讨论】：