如何利用HTML required属性实现未填字段时不触发下一步表单显示

嘿，我懂你的困扰——现在浏览器虽然会提示必填字段，但不管输入有没有效，点击Next都会直接显示tab2，完全没达到“验证通过才跳转”的预期对吧？这是因为默认按钮的行为和你的函数逻辑没配合好，下面给你最简的修改方案：

问题根源拆解 #

1. 表单里的按钮默认是type="submit"，点击时会触发浏览器的表单验证，但不管验证通不通过，onclick里的show()函数都会直接执行。
2. 你两个输入框的id都是urname，这属于无效HTML，会导致后续DOM操作出问题，得赶紧修正。

修改后的完整代码 #

<head>
<style>
#tab2{ display: none; }
</style>
<script>
function show(){ 
  // 获取当前步骤的输入框
  const currentInput = document.getElementById("urname");
  // 检查输入是否符合验证规则
  if (currentInput.checkValidity()) {
    // 验证通过：显示下一个tab，隐藏当前tab
    document.getElementById("tab2").style.display="block";
    document.getElementById("tab1").style.display="none";
  } else {
    // 验证不通过：触发浏览器原生的必填提示
    currentInput.reportValidity();
  }
}
</script>
</head>
<body>
<form>
<div id="tab1">
<input type="text" id="urname" placeholder="Your Name" required><br>
<!-- 改成button类型，避免默认的表单提交刷新页面 -->
<button type="button" onclick="show()">Next</button>
</div>
<div id="tab2">
<!-- 修正重复的id，保证每个元素id唯一 -->
<input type="text" id="urschool" placeholder="Your School Name" required><br>
<button type="button">Next</button>
</div>
</form>
</body>

核心调整说明 #

• 按钮类型改为type="button"：默认的submit按钮会触发表单提交（哪怕没有action也会刷新页面），改成button类型后，按钮只会执行我们写的show()函数，不会乱搞别的。
• 给show()加验证判断：用checkValidity()检查输入是否符合required规则，只有验证通过才切换tab；用reportValidity()直接调用浏览器的原生提示，不用自己写提示文案，省事儿还统一。
• 修正重复id：HTML里每个元素的id必须唯一，不然以后选元素、做逻辑都会出奇怪的bug。

这样改完之后，只有用户填了必填内容，点击Next才会显示下一个表单字段，完全符合你的需求～

内容的提问来源于stack exchange，提问作者m-imran