javascript - 验证至少已选择一个选项

Question

如果表单中没有选择任何选项，我想提醒用户。我的尝试如下所示，但无论是否选择某个选项，仍然会发出警报。

<form id="mainForm" name="mainForm" onsubmit="return validateForm()">
    <input type="radio" name="answer1" value="England">England<br/>
    <input type="radio" name="answer1" value="Scotland">Scotland<br/>
    <input type="radio" name="answer1" value="Wales">Wales<br/>
    <input type="radio" name="answer1" value="Northern Ireland">Northern Ireland<br/>

    <!--radio buttons with different values-->

    <br/>2: Which of the following is not in London:<br/>
    <select id="answer2">
      <option value="St Paul's Cathedral">St Paul's Cathedral</option>
      <option value="Buckingham Palace">Buckingham Palace</option>
      <option value="Stonehenge">Stonehenge</option>
    </select>

function getValue(qArray) {
    // get value from radio array
    var i;
    for (i = 0; i < qArray.length; i++) {
        if (qArray[i].checked) return qArray[i].value;
    }
    return "";
}

function validateForm() {
    var qArray = document.getElementsByName("mainForm");
    var formValid = false;
    var j = 0;
    while (!formValid && j < qArray.length) {
        if (qArray[j].checked) formValid = true;
        j++;        
    }

    if (!formValid) 
        alert("Must check some option!");
    return formValid;
}

Answer 1

我看到您在标记中包含了 jQuery，但实际上并未使用 jQuery。

这是一个不使用 jQuery 的解决方案。

去掉表单中的 onsubmit

 <form id="mainForm" name="mainForm">

并在表单末尾添加一个按钮

<input id="btnSubmit" type="submit">

然后将新按钮绑定(bind)到事件(而不是将表单绑定(bind)到事件)

document.getElementById("btnSubmit").addEventListener("click", validateForm, false);

最后，在 validateForm 函数中，数组应该检查单选按钮，而不是表单。所以改变这一行

    var qArray = document.getElementsByName("answer1");

这是最终的 HTML

<form id="mainForm" name="mainForm">
    <input type="radio" name="answer1" value="England"> England
    <br/>
    <input type="radio" name="answer1" value="Scotland">Scotland
    <br/>
    <input type="radio" name="answer1" value="Wales">Wales
    <br/>
    <input type="radio" name="answer1" value="Northern Ireland">Northern Ireland
    <br/>

    <!--radio buttons with different values-->

    <br/>2: Which of the following is not in London:
    <br/>
    <select id="answer2">
        <option value="St Paul's Cathedral">St Paul's Cathedral</option>
        <option value="Buckingham Palace">Buckingham Palace</option>
        <option value="Stonehenge">Stonehenge</option>
    </select>
    <br>
    <input id="btnSubmit" type="submit">
</form>

以及最终的 JavaScript

document.getElementById("btnSubmit").addEventListener("click", validateForm, false);

function getValue(qArray) {
    // get value from radio array
    var i;
    for (i = 0; i < qArray.length; i++) {
        if (qArray[i].checked) return qArray[i].value;
    }
    return "";
}

function validateForm() {
    var qArray = document.getElementsByName("answer1");
    var formValid = false;
    var j = 0;
    while (!formValid && j < qArray.length) {
        if (qArray[j].checked) 
            formValid = true;

        j++;        
    }

    if (!formValid) 
        alert("Must check some option!");
    return formValid;
}