表單驗證單選按鈕

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 個解決方案

解決方案1
0 已采納 2021-05-04 13:43:36

解決方案2
0 2021-05-04 13:48:53

解決方案3
0 2021-05-04 14:06:39

表單驗證單選按鈕

問題描述

3 個解決方案

解決方案1 0 已采納 2021-05-04 13:43:36

解決方案2 0 2021-05-04 13:48:53

解決方案3 0 2021-05-04 14:06:39

解決方案1
0 已采納 2021-05-04 13:43:36

解決方案2
0 2021-05-04 13:48:53

解決方案3
0 2021-05-04 14:06:39