表单必填项为空仍触发提交过渡：type="image"按钮验证异常问题

你猜的没错！问题确实出在type="image"的input元素上——它的原生行为和普通提交按钮不一样，跳过了HTML5的必填项验证环节，导致没填完内容也能触发表单提交后的页面切换。

为什么会这样？ #

根据HTML规范，type="image"的输入控件属于图像提交按钮，它的核心作用是提交表单，但浏览器不会自动对它触发原生的表单验证（也就是required属性的检查）。而普通的<button type="submit">是标准的提交控件，点击时会先触发表单的完整性验证，只有所有必填项都填了才会提交。

两种解决方法 #

方法1：用<button>包裹图片（推荐，无需JS）

把图像提交按钮换成<button type="submit">，在按钮内部放图片，再用CSS去掉按钮的默认样式，这样既保留图片外观，又能触发原生验证：

<form id="your-form">
  <!-- 你的表单输入项，带required属性 -->
  <input type="text" required placeholder="必填项">
  
  <!-- 替换后的图片提交按钮 -->
  <button type="submit" style="border: 0; background: transparent; padding: 0; cursor: pointer;">
    <img src="your-submit-image.png" alt="提交表单">
  </button>
</form>

这种方法完全依赖浏览器原生验证，不需要额外写JS，兼容性也更好。

方法2：给type="image"添加手动验证逻辑

如果一定要保留type="image"的input，可以通过JavaScript手动触发表单验证，阻止未通过验证的提交：

<form id="your-form">
  <input type="text" required placeholder="必填项">
  <input type="image" src="submit.png" alt="提交" onclick="return handleImageSubmit(event)">
</form>

<script>
function handleImageSubmit(event) {
  const form = event.target.closest('form');
  // 检查表单是否通过所有验证
  if (!form.checkValidity()) {
    // 显示浏览器默认的错误提示
    form.reportValidity();
    // 阻止表单提交和后续的页面切换
    event.preventDefault();
    return false;
  }
  // 验证通过，允许提交
  return true;
}
</script>

这个方法通过checkValidity()检查表单状态，reportValidity()触发默认错误提示，preventDefault()阻止未验证通过的提交行为。

这样调整后，只有填完所有必填项，才会触发表单提交后的感谢内容切换，和普通按钮的行为一致啦！

内容的提问来源于stack exchange，提问作者Jos van Weesel