表单JS验证桌面端失效问题排查与适配方案请求

问题说明 #

邮箱小写验证功能在桌面端（屏幕宽度≥768px）完全失效，控制台无任何报错。排查后确认：桌面端媒体查询中.send-btn被设置为display:none，导致表单提交事件无法正常触发，进而让验证函数失效，需要同时适配移动端和桌面端两个断点。

相关代码 #

JavaScript代码 #

const formSection = document.getElementById('davididhere');
const mailInput = document.getElementById('email');
const messageError = document.getElementById('error-messages');

formSection.addEventListener('submit', (e) => {
  if (mailInput.value === mailInput.value.toLowerCase()) {
    messageError.textContent = '';
  } else {
    e.preventDefault();
    messageError.textContent = '*email must be in lower case <br> * form not sent';
  }
})

HTML代码 #

<section id="contactpage" class="form-section">
  <div class="form-container">
    <form action="https://formspree.io/f/myyvzkag" method="post" id="davididhere">
      <ul class="form-info">
        <li>
          <input type="text" maxlength="30" name="user_name" class="name-text-box" id="full-name" placeholder="Full Name" required="" />
        </li>
        <li>
          <input type="email" name="user_email" class="name-last-text-box" id="email" placeholder="Email Address" required="" />
        </li>
        <li>
          <textarea id="text-box" name="message" maxlength="500" class="enter-form" cols="30" rows="10" placeholder="Enter text here" required=""></textarea>
        </li>
      </ul>
      <input type="submit" value="Get in touch" class="send-btn" />
      <small id="error-messages"></small>
    </form>
  </div>
</section>

CSS代码 #

@media screen and (min-width: 768px) {
  .greet {
    background: url(desktop2.svg) no-repeat 100% 0%;
  }

  .grid-containers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .picture-box {
    background: url(planeleft.svg) no-repeat 0% 20%,
      url(planeright.svg) no-repeat 100% 100%;
  }

  .send-btn {
    display: none;
  }
}

解决方案 #

方案1：替换按钮隐藏方式（推荐） #

把display:none换成视觉隐藏但保留DOM存在和交互性的样式，这样表单提交事件仍能正常触发：

@media screen and (min-width: 768px) {
  .send-btn {
    /* 视觉隐藏元素，但不影响其功能 */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

方案2：新增桌面端专属提交按钮 #

如果需要在桌面端展示不同样式的提交按钮，可以新增一个按钮，仅在桌面端显示，移动端隐藏：

<!-- 在原send-btn后添加桌面端按钮 -->
<input type="submit" value="Get in touch" class="desktop-send-btn" />

/* 默认隐藏桌面端按钮 */
.desktop-send-btn {
  display: none;
}

@media screen and (min-width: 768px) {
  .desktop-send-btn {
    display: inline-block; /* 可替换为你需要的样式 */
  }
  .send-btn {
    display: none;
  }
}

额外修复：错误信息换行问题 #

原代码中用textContent插入<br>不会生效，换成innerHTML：

messageError.innerHTML = '*邮箱必须为小写 <br> * 表单未提交';

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