Question

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

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

任何指导将不胜感激。

Answer 1

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

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

示例：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);

多步骤验证

1 个答案: