验证多组单选按钮 - 仅限 Javascript

Question

我正在尝试同时验证多组单选按钮。我不仅无法验证它们，而且还无法显示 div 中的错误。选择该选项后，我希望验证并保存该值，以便稍后将值保存在本地存储中。 （此时我不想打印它我只想按值验证并确保选择了某些东西）我不确定我做错了什么，这是我的代码：https://jsfiddle.net/7ace6uws/

由于我无法仅发布 jsfiddle 并且还需要随附代码，因此这里是我的 HTML：

<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input type="radio" value="blue" name="color">Blue
      <input type="radio" value="red" name="color">Red
      <div>

      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food">Pizza
      <input type="radio" id="cake" name="food">Cake
    </fieldset>
  </td>

</tr>

<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school">Yes
      <input type="radio" id="no" name="school">No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />

关于可能重复的注意事项：我知道这个问题以前被问过。我已经阅读了类似问题的答案，但我仍然迷路了。对于某些答案，我无法理解 Javascript，因为它们使用了称为模板文字的东西。一些答案还使用了我还没有学过的 jQuery。一些答案也使用了 formData (https://developer.mozilla.org/en-US/docs/Web/API/FormData)，但我还没有学会这一点，所以我正在尝试使用我目前所知道的基本 javascript 来编写代码。

Answer 1

您的 if 中可能有一些问题，要比较您必须使用 && 而不是 & 在您的情况下您要尝试做的是一个或 (||) 的两件事，因为您想检查 blue 是否为 checkod 或如果选中红色。

而且只是为了添加一个让您的生活更轻松的技巧，一旦您将 id 放在它存在于您的 javascript 代码中的元素上，您就不需要编写 document.getElementById("myid") ，这样您就可以使用它：

myid.dosomestuff();

textContent 是一个更近的替代innerHTML，例如，因为它摆脱了文本中的html标签。 你也可能想摆脱你的退货声明：

function validateForm(){

  if(! (blue.checked || red.checked)){
  color.textContent="Please select a color";
  console.log(blue.value);
  }
  else{
  color.textContent="";
  }

  if(! (pizza.checked || cake.checked)){
  food.textContent="Please select a food";
  console.log(pizza.value);
  }
  else{
  food.textContent="";
  }

  if(! (yes.checked || no.checked)){
  school.textContent="Please select an option if you go to school";
  console.log(yes.value);
  }
  else{
  school.textContent="";
  }


}

<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input id="blue" type="radio" value="blue" name="color">Blue
      <input id="red" type="radio" value="red" name="color">Red
      <div>
 
      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food">Pizza
      <input type="radio" id="cake" name="food">Cake
    </fieldset>
  </td>
</tr>
 
<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school">Yes
      <input type="radio" id="no" name="school">No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />

Answer 2

将所有内容包装成形式。 定义它，然后像这样访问表单元素的颜色值：

form.elements["color"].value

还添加了食物和学校的山谷，以同样的方式访问它。 这是你想要的吗？

此外，如果这将是提交表单，您只需将 required 添加到一组单选按钮，以便 HTML 进行验证，用户必须从组中选择一个。并且只有选择的值将通过提交按钮发送，您根本不需要 JS。

希望对您有所帮助，我很容易理解您的需求。

function validateForm(){
var form = document.getElementById("test");
  if(! (blue.checked || red.checked)){
  color.textContent="Please select a color";
  }
  else{
  color.textContent=(form.elements["color"].value);
  }

  if(! (pizza.checked || cake.checked)){
  food.textContent="Please select a food";
  }
  else{
  food.textContent=(form.elements["food"].value);
  }

  if(! (yes.checked || no.checked)){
  school.textContent="Please select an option if you go to school";
  }
  else{
  school.textContent=(form.elements["school"].value);
  }


}

<form id="test">
<tr>
  <td><label>Whats your favorite color:</label:>
  </td>
  <div id="color"></div>
  <td>
    <fieldset id="group1">
      <input id="blue" type="radio" value="blue" name="color">Blue
      <input id="red" type="radio" value="red" name="color">Red
      <div>
 
      </div>
    </fieldset>
  </td>
</tr>

<tr>
  <td><label>What is your favorite food:</label></td>
  <div id="food"></div>
  <td>
    <fieldset id="group2">
      <input type="radio" id="pizza" name="food" value="Pizza">Pizza
      <input type="radio" id="cake" name="food" value="Cake">Cake
    </fieldset>
  </td>
</tr>
 
<tr>
  <td><label>Do you go to school:</label></td>
  <div id="school"></div>
  <td>
    <fieldset id="group3">
      <input type="radio" id="yes" name="school"value="Yes">Yes
      <input type="radio" id="no" name="school" value="No" >No
    </fieldset>
  </td>
</tr>
<input type="button" value="Save" onclick="validateForm();" />
</form>