确认至少选择了一个选项

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">

然后将新按钮绑定到事件（而不是将表单绑定到事件）

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;
}

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：

function validateRadio(radios) {
    // get value from radio array
    var i;   
    for (i = 0; i < radios.length; i++) {
        if (radios[i].checked)
            return true;
    }
    return false;
}

function validateForm() {

    var radios = document.getElementsByName("answer1");  
    var isFormValid = validateRadio(radios);
     alert(isFormValid);
    if(isFormValid) {       
      document.forms[0].submit();
      alert('form submitted!');
      }
      else
      {
        alert('You must select one location, please.');
      }     
}

你可以在这里看到它的工作原理：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++){
	var answer = answers[i];
	if( form[answer].value.length==0){
	  allValid=false;
	  break;
	}
  }
  
  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>