title: Make span element hidden when javascript validation succeeds
body: <p>I am stuck on how to make a span element become hidden again when the JavaScript validation succeeds. Currently <code>onchange</code> and <code>onblur</code> a red span appears showing an error if there is no text or if there are numbers in a name field. This does not disappear when the correct text is put in. I was just wondering how to make this message disappear when the correct text is put in? Code is below.</p>
  
  <p>JavaScript:</p>
  
  <pre><code>function validateName() {
      var name = form.firstname.value; 
      if (form.firstname.value == "") { 
          document.getElementById("firstnameInvalid").style.visibility = "visible";  
          return false;
      } if (/[0-9]/.test(name)) {
          document.getElementById("firstnameInvalid").style.visibility = "visible";
          return false;  
      } 
      return true;
  }
  </code></pre>
  
  <p>Form HTML:</p>
  
  <pre><code>&lt;form name="form" method="post" action= "userdetails.html" onsubmit="return validate(this)"&gt;
  
  &lt;p&gt;First Name:&lt;input type="text" name="firstname" onblur="validateName()" onchange="validateName()" id="name"&gt;
      &lt;span id="firstnameInvalid" style="color:red; visibility:hidden"&gt; First Name is Invalid &lt;/span&gt;
  &lt;/p&gt;
  </code></pre>