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（＆＃34; btnSubmit＆＃34;）。addEventListener（＆＃34; click＆＃34;，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

您需要在命名元素时保持一致。 'name =“answer2”'必须添加到您的元素中。
document.getElementsByName（“mainForm”）只会给出1个元素（）。我建议使用'document.forms.mainForm'或document.forms [“mainForm”]。
您可以使用'document.forms.mainForm.elements'遍历表单中的所有元素，但创建答案数组会更简单
1. 在您的Just中添加一个空，以确保他们选择答案而不是选择默认值。

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>

验证至少选择了一个选项

3 个答案: