如何避免显示错误消息时表单按钮被向下推送？

当输入框为空并点击提交按钮时，错误消息弹出的同时会将提交按钮向下推送，如何阻止按钮出现这种下移情况？

错误消息显示前后按钮位置对比：

原代码如下：

HTML #

<div class="card">
  <form action="" id="form">
    <h1>Please input your user name here</h1>
    <div class="input"><input id="input" type="text" /></div>
    <small></small>
    <div class="button">
      <button id="submit" type="submit">Submit</button>
    </div>
  </form>
</div>

CSS #

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

.card {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
}

form {
  display: flex;
  flex-direction: column;
}

input {
  height: 2em;
  width: 15em;
}

.button {
  position: relative;
  top: 2em;
  width: fit-content;
  border: 2px solid;
  margin-top: 20px;
  margin: 0;
}

.button button {
  cursor: pointer;
}

small {
  font-style: italic;
  color: red;
  text-align: right;
  width: 15em;
  display: none;
  margin: 0;
}

.error small {
  display: block;
}

JavaScript #

const form = document.getElementById("form");
const input = document.getElementById("input");

form.addEventListener("submit", function(e) {
  e.preventDefault();
  
  const name = input.value;

  if (name === "") {
    addError("Input field cannot be empty");
  }
});

function addError(message) {
  const small = document.querySelector("small");
  
  small.classList.add("error");
  small.innerText = message;
  small.style.display = "block";
}

解决方案 #

按钮下移的核心原因是：small元素默认display: none不占据文档流空间，显示时会插入到正常布局中，挤压后续元素位置。以下是几种可行的解决方法：

方法1：用visibility替代display保留元素空间 #

修改small的CSS样式，默认隐藏但保留高度，这样显示时不会改变布局结构：

small {
  font-style: italic;
  color: red;
  text-align: right;
  width: 15em;
  visibility: hidden; /* 隐藏但保留空间 */
  margin: 0;
  height: 1.2em; /* 根据字体大小设置匹配高度 */
}

small.error {
  visibility: visible;
}

同时调整JavaScript，无需修改display属性：

function addError(message) {
  const small = document.querySelector("small");
  
  small.classList.add("error");
  small.innerText = message;
}

方法2：绝对定位脱离文档流 #

给small设置绝对定位，使其脱离正常文档流，不会影响按钮位置：

form {
  display: flex;
  flex-direction: column;
  position: relative; /* 设置为绝对定位的父容器，确保错误消息相对表单定位 */
}

small {
  font-style: italic;
  color: red;
  text-align: right;
  width: 15em;
  display: none;
  margin: 0;
  position: absolute;
  top: 80px; /* 根据表单布局调整到输入框下方合适位置 */
}

此方法无需修改JS代码，错误消息显示时不会挤压按钮。

方法3：用Grid布局预留错误消息区域 #

将表单改为Grid布局，为错误消息分配固定网格区域，无论是否显示都不会改变按钮位置：

form {
  display: grid;
  grid-template-areas: 
    "title"
    "input"
    "error"
    "button";
  grid-row-gap: 8px; /* 调整各区域间距 */
}

h1 { grid-area: title; }
.input { grid-area: input; }
small { grid-area: error; }
.button { grid-area: button; }

small {
  font-style: italic;
  color: red;
  text-align: right;
  width: 15em;
  visibility: hidden;
  margin: 0;
}

small.error {
  visibility: visible;
}

这种方式布局更稳定，适合复杂表单场景。

内容的提问来源于stack exchange，提问作者user20641575