Javascript 具有特定输入值的多步骤表单

我正在制作一个多步骤表单

每个步骤只有一个输入字段和一个下一步按钮 我想设置它，这样一个字段只有在您输入特定文本时才有效

例如，表单的第一部分有一个输入字段作为NAME。。。我希望它在进入下一步之前只接受JOHN这个名字，如果不接受，它应该给出一个错误警报

请帮助我修改或添加任何代码

我为任何形式的糟糕英语道歉。提前谢谢

这是我的html代码

<form>
  <!-- One "tab" for each step in the form: -->
  <div class="tab">First Name:
    <p><input  placeholder="First Name..." ></p>
  </div>
  <div class="tab">Last Name:
    <p><input  placeholder="Last Name..." ></p>
  </div>
  <div class="tab">Contact Info:
    <p><input placeholder="E-mail..." ></p>
  </div>
  <div style="overflow:auto;">
    <div style="float:right;">
      <button type="button" id="nextBtn" ">Next</button>
    </div>
  </div>
</form>

名字：

姓氏：

联系方式：


$（“#nextBtn”）。单击（函数（）{
var tab=$（“.tab:不（.hidden）”）；
var输入=制表符查找（“输入”）；
变量检查={
“名字”：“约翰”，
“姓氏”：“史密斯”，
“电子邮件”：“j。smith@example.com"
};
if（input.val（）==检查[input.attr（“name”））{
tab.addClass（“隐藏”）；
如果（tab.next（）.length）{
tab.next（）.removeClass（“隐藏”）；
}否则{
//提交表格
}
}否则{
警报（“错误输入”）；
}
});
。隐藏{
显示：无！重要；
}

名字：

姓氏：

联系方式：

您需要跟踪所有表单中的所有输入，并且可能需要一个“后退”按钮。我建议用投票结束，因为问题太广泛了。“请编辑问题，将其限制在特定的问题上，并提供足够的详细信息，以确定适当的答案。避免一次问多个不同的问题。请参阅页面以获取澄清此问题的帮助。”如果表单只接受一个特定答案，那么表单的意义何在？猜谜游戏还是什么？无论如何，HTML5输入可以帮助您限制输入中可以写入的内容。快速而肮脏的方法是将当前输入值与单击时所需的值进行比较。如果答案正确，请加载下一个问题，否则会出错。@Shilly。。。。正是你说的。。。如果答案正确，则加载下一个问题，否则出错；我们要写剧本，很简单不？使用您喜爱的选择器获取元素。如果element.id=='name'，请求的\u答案='JOHN'。如果请求，则加载下一个问题。否则抛出新错误。但由于没有任何结构来解释如何加载新问题等，因此很难提供实际工作的代码。对不起。。。这不管用。。。这不涉及下一个问题。。lastname缺点是您可以很容易地查看客户端脚本以找到正确的答案。