时间戳

首页 > 解决方案 > 多步验证

javascript - 多步验证

问题描述

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

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

任何指导将不胜感激。

标签： javascriptjqueryasp.net-mvcmodel-view-controller

解决方案

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

  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);

推荐阅读