多步验证

Question

我正在使用here 找到的表单的修改版本。如果当前选项卡的信息不正确，我只是希望表单不进行。我也修改了下一个按钮（将类型更改为提交，它仍然会处理表单并调用我的验证消息。我希望用户被锁定到没有正确输入内容的选项卡。）

<input type="submit" name="next" class="next action-button" value="Next" />

任何指导将不胜感激。

Answer 1

您尚未指定表单上的字段类型。假设有常规的文本框、复选框等，你可以做的是

1. 加载时，禁用“下一步”按钮。
2. 将验证器函数绑定到需要验证的字段的更改事件。
3. 验证器功能应检查选项卡所需的所有条件，如果都满足，则启用“下一步”按钮。否则，请禁用该按钮。

示例：JSFiddle

HTML：

<form id="input-form">
<input type="text" id="name">
<input type="number" id="employee-id">
<input type="submit" name="Next" id="next-button" disabled>
</form> 

JS（使用 jQuery）：

function validate() {
    if (validateName() && validateId()) {
    $('#next-button').removeAttr('disabled');
  } else {
    $('#next-button').attr('disabled', 'disabled');
  }
}

function validateName() {
    let name = $('#name').val();
    return name !== '' && !(/\d/.test(name));
}

function validateId() {
    let id = $('#employee-id').val()
    return id !== '' && !(/[a-z]/.test(id.toLowerCase()));
}

$('form > input').keyup(validate);