验证多组单选按钮 - 仅限 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 还是 red 是检查。

并且只是为了添加一个让您的生活更轻松的技巧，一旦您将 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>