HTML表单required标签失效及QTY字段按需显示问题求助

算力阿峰

2026-5-28

订购表单问题解决方案

你的需求回顾

实现一个用于订购物品的HTML表单
仅当选中对应物品（选择了尺码/型号）时，才显示其对应的QTY（数量）字段
设置表单必填项

当前遇到的问题

为NAME输入框添加了required属性，但未填写NAME提交表单时，表单仍可提交，没有弹出必填提示
尚未完成“选中物品才显示对应QTY字段”的功能

问题解决与代码优化

1. 修复`required`属性不生效的问题

你的NAME输入框required属性没生效，核心原因是表单缺少提交按钮——浏览器的原生表单验证只有在触发提交动作（比如点击type="submit"的按钮）时才会触发。另外我也给其他常用必填项（比如EMAIL、DEPARTMENT）加上了required，你可以根据实际需求调整。

2. 实现“选中物品才显示QTY字段”的功能

我们可以用JavaScript监听每个物品选择框的change事件：当用户选择了非空的有效选项时，显示对应的QTY字段；如果切换回空选项，则隐藏QTY字段。

完整优化后的代码

<form>
  NAME <input type="text" name="NAME" id="NAME" required/>
  <br />
  <br>
  EMAIL <input type="email" name="EMAIL" id="EMAIL" required>
  <br />
  <br>
  DEPARTMENT <select name="DEPARTMENT" id="DEPARTMENT" required>
    <option value="">请选择部门</option>
    <option value="HR">HR</option>
    <option value="DMS">DMS</option>
    <option value="RIM">RIM</option>
  </select><br />
  <br>
  PURPOSE <select name="PURPOSE" id="PURPOSE" required>
    <option value="">请选择用途</option>
    <option value="NEW KIT">NEW KIT</option>
    <option value="EXCHANGE KIT">EXCHANGE KIT</option>
  </select><br/>
  <br>
  SHIRT 1 <select name="SHIRT1" id="SHIRT1">
    <option value="">请选择尺码</option>
    <option value="XS">XS</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="2XL">2XL</option>
    <option value="3XL">3XL</option>
    <option value="4XL">4XL</option>
    <option value="5XL">5XL</option>
    <option value="6XL">6XL</option>
    <option value="7XL">7XL</option>
  </select><br />
  <br>
  <div id="qty1-container" style="display: none;">
    QTY <SELECT name="QTY1" id="QTY1">
      <option value="">请选择数量</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </SELECT>
  </div>
  <br />
  <br>
  PANT 1 <select name="PANT1" id="PANT1">
    <option value="">请选择尺码</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
  </select><br />
  <br>
  <div id="qty2-container" style="display: none;">
    QTY <select name="QTY2" id="QTY2">
      <option value="">请选择数量</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
  <br />
  <br>
  SHIRT 2 <select name="SHIRT2" id="SHIRT2">
    <option value="">请选择尺码</option>
    <option value="XS">XS</option>
    <option value="S">S</option>
    <option value="M">M</option>
    <option value="L">L</option>
    <option value="XL">XL</option>
    <option value="2XL">2XL</option>
    <option value="3XL">3XL</option>
    <option value="4XL">4XL</option>
    <option value="5XL">5XL</option>
  </select>
  <br />
  <br>
  <div id="qty3-container" style="display: none;">
    QTY <SELECT name="QTY3" id="QTY3">
      <option value="">请选择数量</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </SELECT>
  </div>
  <br />
  <br>
  PANT 2 <select name="PANT2" id="PANT2">
    <option value="">请选择尺码</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    <option value="32">32</option>
    <option value="33">33</option>
    <option value="34">34</option>
    <option value="35">35</option>
    <option value="36">36</option>
    <option value="37">37</option>
    <option value="38">38</option>
    <option value="39">39</option>
    <option value="40">40</option>
    <option value="41">41</option>
    <option value="42">42</option>
    <option value="43">43</option>
    <option value="44">44</option>
    <option value="45">45</option>
    <option value="46">46</option>
    <option value="47">47</option>
    <option value="48">48</option>
  </select>
  <br />
  <br>
  SAFETY SHOES <select name="SAFETYSHOES" id="SAFETYSHOES">
    <option value="">请选择尺码</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
  </select>
  <br />
  <br>
  <div id="qty4-container" style="display: none;">
    QTY <select name="QTY4" id="QTY4">
      <option value="">请选择数量</option>
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>
  <br />
  <br>
  <button type="submit">提交订单</button>
</form>

<script>
// 监听所有物品选择框的切换事件
document.getElementById('SHIRT1').addEventListener('change', function() {
  const qtyContainer = document.getElementById('qty1-container');
  qtyContainer.style.display = this.value ? 'block' : 'none';
});

document.getElementById('PANT1').addEventListener('change', function() {
  const qtyContainer = document.getElementById('qty2-container');
  qtyContainer.style.display = this.value ? 'block' : 'none';
});

document.getElementById('SHIRT2').addEventListener('change', function() {
  const qtyContainer = document.getElementById('qty3-container');
  qtyContainer.style.display = this.value ? 'block' : 'none';
});

document.getElementById('PANT2').addEventListener('change', function() {
  const qtyContainer = document.getElementById('qty4-container');
  qtyContainer.style.display = this.value ? 'block' : 'none';
});

document.getElementById('SAFETYSHOES').addEventListener('change', function() {
  const qtyContainer = document.getElementById('qty4-container');
  qtyContainer.style.display = this.value ? 'block' : 'none';
});
</script>

关键优化点说明

添加了<button type="submit">按钮，触发浏览器原生表单验证，让required属性正常生效
把每个QTY字段包裹在div容器中，初始设置display: none隐藏，通过JS控制显示/隐藏
给所有下拉框的默认空选项添加value=""，确保能准确判断用户是否选择了有效选项
用简洁的JS监听事件，实现选中物品才显示对应数量框的交互逻辑

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

HTML表单required标签失效及QTY字段按需显示问题求助

你的需求回顾 #

当前遇到的问题 #

问题解决与代码优化 #

1. 修复required属性不生效的问题 #

2. 实现“选中物品才显示QTY字段”的功能 #

完整优化后的代码 #

关键优化点说明 #