带文本输入框的单选按钮表单验证（求JavaScript实现示例）

我来帮你搞定这个场景的表单验证！当用户选中「Other」单选按钮但未填写对应的文本输入框就提交时，我们需要精准触发错误提示，而不是现有代码里的通用提示。下面是修改后的完整实现，我会一步步说明改动点：

修改后的完整代码 #

HTML 部分 #

首先给「Other」对应的文本框添加一个id，方便我们在JS中精准获取它，同时给提交按钮绑定验证触发事件：

<section class="form-section">
  <fieldset>
    <legend>This Application is For</legend>
    <div class="input-container">
      <input type="radio" name="this" id="new" value="new">
      <label for="new">New membership</label>
    </div>
    <div class="input-container">
      <input type="radio" name="this" id="add" value="add">
      <label for="add">Addition of dependent(s) to existing policy as listed above</label>
    </div>
    <div class="input-container">
      <input type="radio" name="this" id="upgrade" value="upgrade">
      <label for="upgrade">Upgrade existing plan</label>
    </div>
    <div class="input-container">
      <input type="radio" name="this" id="other" value="other">Other:<input type="text" name="plan" id="other-plan"/>
      <span class="error-messages" id="this-error"></span>
    </div>
  </fieldset>
</section>
<section class="form-section">
  <input type ="submit" value="submit" onclick="return validation(this.form)"/>
</section>

CSS 部分 #

保留你现有的样式，同时给错误提示添加基础样式让它更显眼：

input[type="submit"] {
  padding:10px;
  height:inherit;
  background-color:purple;
  width:100%;
}

.error-messages {
  display: none;
  color: red;
  margin-left: 8px;
}

JavaScript 部分 #

修改验证逻辑，加入「选中Other时必须填写文本框」的针对性判断：

function validation(thisForm) {
  const errorElement = document.getElementById('this-error');
  // 每次验证前重置错误提示
  errorElement.innerHTML = "";
  errorElement.style.display = "none";

  // 获取当前选中的单选按钮
  const selectedRadio = thisForm.querySelector('input[name="this"]:checked');

  // 第一阶段：验证是否选中了至少一个选项
  if (!selectedRadio) {
    errorElement.innerHTML = "Please select at least one option!";
    errorElement.style.display = "inline-block";
    return false;
  }

  // 第二阶段：如果选中的是「Other」，验证对应的文本框是否为空
  if (selectedRadio.value === "other") {
    const otherInput = document.getElementById('other-plan');
    // 使用trim()过滤空格，避免用户只输入空格就通过验证
    if (!otherInput.value.trim()) {
      errorElement.innerHTML = "Please fill in the 'Other' field!";
      errorElement.style.display = "inline-block";
      return false;
    }
  }

  // 所有验证通过，允许提交表单
  return true;
}

关键改动说明 #

• 精准元素定位：给「Other」的文本框加专属id，确保能准确获取输入内容
• 分阶段验证逻辑：先检查是否有单选按钮被选中，再针对「Other」选项做特殊验证，覆盖所有场景
• 用户体验优化：用trim()过滤输入空格，避免无效内容通过；每次验证前重置错误提示，防止旧提示残留
• 验证触发绑定：给提交按钮绑定onclick事件，确保点击提交时自动执行验证函数

这样修改后，当用户选中「Other」但不填文本框就提交时，会显示专门的错误提示；其他场景也能正常验证是否选中了选项。

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