title: Javascript validation - Error message only flashes for a second
body: <p>I have this simple HTML project that validates an empty text and radiobutton field. The error is being displayed if one of the fields are empty, but the error message only flashes on the screen for a second, before disappearing again. Why is this happening?</p>
  
  <p>Here's my HTML code</p>
  
  <pre><code>&lt;form id="food_form"&gt;
  &lt;p&gt;
      &lt;label&gt;Your Name:
          &lt;input type="text" id="user_name" name="user_name"&gt;
      &lt;/label&gt;
      &lt;span id="error_user_name" class="error"&gt;&lt;/span&gt;
  &lt;/p&gt;
  &lt;p&gt;
      Favorite Food?
      &lt;span id="error_radiobutton" class="error"&gt;&lt;/span&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type="radio" name="radiobutton" value="pizza"&gt;Pizza&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type="radio" name="radiobutton" value="burger"&gt;Burger&lt;/label&gt;&lt;br&gt;
      &lt;label&gt;&lt;input type="radio" name="radiobutton" value="spaghetti"&gt;Spaghetti&lt;/label&gt;&lt;br&gt;
  &lt;/p&gt;
  
      &lt;input type="submit" value="Submit"&gt;
  </code></pre>
  
  <p></p>
  
  <p>And then my Javascript code</p>
  
  <pre><code>&lt;script&gt;
  
  document.getElementById("food_form").onsubmit = validateForm;
  
  function validateForm() {
  
      var validName = validateTextBox("user_name", "error_user_name"),
          validRadiobutton = validateRadioButton();
  
  }
  
  function validateTextBox(fieldId, errorId) {
      var text = document.getElementById(fieldId).value,
          errorSpan = document.getElementById(errorId);
  
      if (text === "") {
          errorSpan.innerHTML = "* please input your name";
      }
  
  
  }
  
  function validateRadioButton() {
  
      var radiobutton = document.getElementById("food_form").radiobutton,
          errorSpan = document.getElementById("error_radiobutton"),
          isChecked = false,
          i;
  
      errorSpan.innerHTML = "";
  
      for (i = 0; i &lt; radiobutton.length; i++) {
  
          if (radiobutton[i].checked) {
              isChecked = true;
              break;
          }
  
      }
  
      if (!isChecked) {
          errorSpan.innerHTML = "* You must pick something.";
  
      }
  
  }
  </code></pre>
  
  <p></p>
  
  <p>Your response would be kindly appreciated.</p>