Question

我想使用 JavaScript 以 HTML 格式验证我的表单，特别是检查用户是否单击了任一单选按钮。我的部分代码如下：

HTML：

<fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="tutor1" selected="selected">Tutor 1</option>
                        <option value="tutor2">Tutor 2</option>
                        <option value="tutor3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>

JavaScript：

function isUnitSelected(){
    var selected = false;
    var isCOS10011 = document.getElementById("COS10011").checked;
    var isCOS60004 = document.getElementById("COS60004").checked;
    var isCOS60007 = document.getElementById("COS60007").checked;
    
    if (isCOS10011 || isCOS60004 || isCOS60007)
        selected = true; //we haven't used {}. BE CAREFUL about adding extra lines
    else{
        selected = false;
        gErrorMsg = gErrorMsg + "Select a sex for your cat\n"
    }
    
    return selected;
}

Answer 1

您可以简单地向组中的一个单选按钮添加一个 required 属性，它会触发本机验证：

<form action="#">
  <fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011" required>COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button>submit</button>
</form>

JS 版本：

function isUnitSelected() {
  const radios = document.querySelectorAll('input[name="unit"]');
  const selected = [...radios].some(radio => radio.checked);
  if (!selected) {
    let gErrorMsg = "Select a sex for your cat\n";
    console.log(gErrorMsg);
  }
  return selected;
}

<form action="#" onsubmit="return isUnitSelected()">
  <fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011">COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button>submit</button>
</form>

Answer 2

您可以使用 document.getElementsByName 来做到这一点。

function checkIt(){
     let unit=document.getElementsByName("unit");
   let selected = false;
   for (let i=0;i<unit.length;i++){
        if (unit[i].checked){
        selected = true;
        break;
      }
   }
   if (!selected){
    gErrorMsg = gErrorMsg + "Select a sex for your cat\n";
    alert(gErrorMsg);
   }
   return selected;
}

<fieldset>
    <legend>Your unit</legend>
    <label for="COS10011"><input type="radio" name="unit" id="COS10011" >COS10011</label>
    <label for="COS60004"><input type="radio" name="unit" id="COS60004">COS60004</label>
    <label for="COS60007"><input type="radio" name="unit" id="COS60007">COS60007</label>
    <br/>
    <p>
      <label>Your Tutor: </label>
      <select name="tutor" id="tutor">
        <option value="tutor1" selected="selected">Tutor 1</option>
        <option value="tutor2">Tutor 2</option>
        <option value="tutor3">Tutor 3</option>
      </select>
    </p>
  </fieldset>
  <button onclick="checkIt()">Go</button>

Answer 3

工作很棒

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<fieldset>
            <legend>Your unit</legend>
                <label for="COS10011"><input type="radio" name="unit" id="COS10011" class="radio" value="1">COS10011</label>
                <label for="COS60004"><input type="radio" name="unit" id="COS60004" class="radio" value="2">COS60004</label>
                <label for="COS60007"><input type="radio" name="unit" id="COS60007" class="radio"  value="3">COS60007</label><BR>
                <p><label>Your Tutor: </label>
                    <select name="tutor" id="tutor">
                        <option value="1" selected="selected">Tutor 1</option>
                        <option value="2">Tutor 2</option>
                        <option value="3">Tutor 3</option>
                    </select>
                </p>
        </fieldset>
</body>
<script>
    
    $(document).ready(function () {
       $('.radio').click(function () {
           selectElement('tutor', $(this).val());
       });
   });
   

  function selectElement(id, valueToSelect) {    
      let element = document.getElementById(id);
      element.value = valueToSelect;
    }

    
</script>
</html>

表单验证单选按钮

3 个答案: