title: JavaScript - Checking if Radio Button is selected
body: <p>In my form I have two radio buttons and the page has a script which validates the form itself, up until the radio buttons. So if you fulfill all the criteria prior to the radio buttons you will be able to submit the form, so naturally I want to make sure the user selects an option before the form can be submitted.</p>
  
  <p>I have found a function which does this here: <a href="https://stackoverflow.com/questions/10339073/radio-button-validation-in-javascript">Radio button validation in javascript</a></p>
  
  <p>I have adapted the script from the top answer to fit to my current script but it won't work. It will either crash, or display the error but then still go to the submission page.</p>
  
  <p>I have tried doing the complete opposite of how the answer tests for arguments since the answer uses <code>var formValid = false;</code> and I use <code>valid = true;</code>.</p>
  
  <p>I have commented out the radio button check part of the function and returned it to the default arguments (and cleaned up the answer's bad use of braces).</p>
  
  <pre><code>function checkForm() {
      var valid = true;
      var radios = document.getElementsByName("smoking");
  
      if (!retext.test(document.myform.textfield.value)) {
              document.myform.textfield.style.border = "3.5px solid red";
              document.getElementById("text").innerHTML = "Invalid text.";
              document.getElementById("text").style.display = "block";
              valid = false;
      }
  
      if (!re.test(document.myform.email.value)) {
          document.myform.email.style.border = "3.5px solid red";
          document.getElementById("emailwarn").innerHTML = "Invalid email.";
          document.getElementById("emailwarn").style.display = "block";
          valid = false;
      }
  
      if (!retel.test(document.myform.tel.value)) {
          document.myform.tel.style.border = "3.5px solid red";
          document.getElementById("telwarn").innerHTML = "Invalid telephone number.";
          document.getElementById("telwarn").style.display = "block";
          valid = false;
      }
  
      /*var i = 0;
      while (!valid &amp;&amp; i &lt; radios.length) {
         if (radios[i].checked) {
              valid = true;
          }
          i++;
      }
  
      if (!valid) {
          document.getElementById("radiowarn").innerHTML = "Please select one.";
          document.getElementById("radiowarn").style.display = "block";
      }*/
  
      return valid;
  }
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;form name="myform" method="POST" action="http://manutd.com" onsubmit="return checkForm()"&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Hi&lt;/legend&gt;
          &lt;label&gt;Random text: &lt;/label&gt;
          &lt;input type="text" name="textfield"&gt;
          &lt;div id="text"&gt;&lt;/div&gt;
          &lt;label&gt;Email: &lt;/label&gt;
          &lt;input type="email" name="email"&gt;
          &lt;div id="emailwarn"&gt;&lt;/div&gt;
          &lt;label&gt;Tel: &lt;/label&gt;
          &lt;input type="tel" name="tel" maxlength="11"&gt;
          &lt;div id="telwarn"&gt;&lt;/div&gt;
          &lt;label&gt;Smoking: &lt;/label&gt;
          &lt;input type="radio" name="smoking" value="1"&gt;
          &lt;label&gt;Non-smoking: &lt;/label&gt;
          &lt;input type="radio" name="smoking" value="2"&gt;
          &lt;div id="radiowarn"&gt;&lt;/div&gt;
          &lt;input type="submit" value="Submit Form"&gt;
          &lt;input type="reset" value="Reset Form"&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  </code></pre>