验证单选按钮的多个组-仅Java语言

问题描述 投票:1回答:1

我正在尝试同时验证多组单选按钮。我不仅在验证它们时遇到麻烦,而且在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编写代码。

javascript html forms radio-button
1个回答
0
投票

您的if可能有一些问题,要比较两件事,您必须使用&&而不是&,在这种情况下,您要尝试的是or或(||),因为您要检查蓝色是否为checkod或红色被选中。

[并且添加一个使您的生活更轻松的技巧,将id放在javascript代码中存在的元素上后,您无需编写document.getElementById(“ myid”)即可使用它:

myid.dosomestuff();

textContent是innerHTML的最新替代品,例如,它摆脱了文本中的html标签。您也可能想摆脱自己的return语句:

function validateForm(){

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

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

  if(! (yes.checked || no.checked)){
  school.textContent="Please select an option if you go to school";
  }
  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();" />
© www.soinside.com 2019 - 2024. All rights reserved.