验证是否已选择至少一个选项

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的解决方案。

得到您的形式

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

摆脱的onsubmit和一个按钮添加到您的形式结束

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

然后把新的按钮绑定到事件（而不是结合的形式到事件）

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（ “点击”，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; 
} 

Answer 2

这里。使这个变化：

HTML：

<form id="mainForm" name="mainForm" method="POST">  
     <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 type="button" value='go' onclick="validateForm()"/> 
    </form> 

JS：

你可以看到它在这里工作：https://jsfiddle.net/q5rf4uf5/1/

Answer 3

1. 你需要在命名您的内容是一致的。 'name =“answer2”'必须添加到您的元素。
2. document.getElementsByName（“mainForm”）只会给出1个元素（the）。我会建议使用'document.forms.mainForm'或document.forms [“mainForm”]。
3. 您可以通过使用“document.forms.mainForm.elements”，但创建答案阵列会更简单穿越于形式的所有元素，并
4. 在你只需添加一个空以确保他们选择一个答案，而不是选择默认。

function validateForm() { 
 

 
    var answers = ["answer1","answer2"]; 
 
    var form = document.forms["mainForm"]; 
 
    var allValid=true; 
 
    
 
    for(var i=0; i<answers.length; i++){ 
 
\t var answer = answers[i]; 
 
\t if(form[answer].value.length==0){ 
 
\t allValid=false; 
 
\t break; 
 
\t } 
 
    } 
 
    
 
    if(!allValid) 
 
    alert("answer all questions"); 
 
}

<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" name="answer2" > 
 
     <option value="">Select an answer</option> 
 
     <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/> 
 
    <button type="submit">submit</button> 
 
</form>