JavaScript - 表单中的 Bootstrap 选项按钮验证

Question

我需要验证方面的帮助。 这是我的代码:

HTML:

<label for="option">כיתה נוכחית:</label>
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="class" value="12" > י"ב
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="11" > י"א
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="10"> י'
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="9"  id="9"  onkeyup="validateClass()"> ט'
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="8" > ח'
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
  </label>

结果:

问题:我想检查用户是否单击了其中一个按钮。

我尝试这样做:

if (calss10 === null) 

我想这样做:onekeyup=""

Answer 1

这将解决您的问题。 您需要创建一个在用户提交表单时运行的函数 (onsubmit) 这是一个表单示例: P.S 您需要为每个单选按钮添加一个 id id="class"

 <form onsubmit="return Validate()">
    <label for="option">כיתה נוכחית:</label>
    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-primary">
        <input type="radio" name="class" value="12" > י"ב
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="11" > י"א
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="10"> י'
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="9"  id="9"  onkeyup="validateClass()"> ט'
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="8" > ח'
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="7" id="7" onkeyup="validateClass()"> ז'
      </label>
      <label class="btn btn-primary">
        <input type="radio" name="class" value="6" id="6" onkeyup="validateClass()"> ו'
      </label>

</form>  

function Validate() {
    if (!Validate_Class())
        return false;
}
function Validate_Class() {
    if (!document.getElementById("class").checked) {
        alert("אתה חייב לבחור כיתה!");
        return false;
    }
}