title: How to clear validation message on form after user input
body: <p>I basically have made a sign up form and included validation messages next to each text field if the data entered is correct but I was wondering once the user has input the correct data how can I clear this message, at the moment it stays present on the screen. I am a beginner so I have a feeling that I am doing this an extremely long way, also any suggestions on how I can check if the username exists in database the same way I am checking validation with javascript. The submit button is unavailable until all required fields are valid. Thanks</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          function validate()
          {
              var valid = true;
  
              if (validateUsername() === true &amp;&amp; validatePassword() === true &amp;&amp;
                      validateMobileNumber() === true &amp;&amp; validateEmail() === true &amp;&amp;
                      validateCity() === true &amp;&amp; validatePostode() === true &amp;&amp;
                      validateDOB() === true &amp;&amp; validatePasswordVeri() === true)
              {
                  valid = false;
              }
  
              if (valid)
              {
                  document.getElementById('submit').disabled = !valid;
              }
  
  
          }
  
          function validateUsername()
          {
              if (registerform.username.value.length === null || registerform.username.value === "")
              {
                  document.getElementById('uname').innerHTML = "Please enter a username";
                  return false;
                 }
              return true;
          }
  
          function validatePassword()
          {
  
              if (registerform.password.value.length &gt;= 6 || registerform.password.value === "")
              {
                  document.getElementById('pword').innerHTML = "Please enter a password which is 6 or more characters";
                  return false;
              }
                 return true;
          }
  
  
              function validatePasswordVeri()
              else if (registerform.passwordVeri.value !== registerform.password.value || register.passwordVeri.value === "")
              {
                  document.getElementById('pwordv').innerHTML = "Passwords do not match";
                  return false;
              }
              return true;
          }
  
          function validateMobileNumber()
          {
              if (registerform.mobileNumber.value.length !== 11 || registerform.mobileNumber.value === "")
              {
                  document.getElementById('mobNum').innerHTML = "Please enter a correct mobile number";
                  return false;
              }
              return true;
          }
  
          function validateEmail()
          {
              return true;
          }
  
          function validatecity()
          {
              if (registerform.city.value === "")
              {
                  document.getElementById('userCity').innerHTML = "Please enter a city";
                  return false;
              }
              return true;
          }
          function validatePostcode()
          {
              if (registerform.postCode.value === "")
              {
                  document.getElementById('pCode').innerHTML = "Please enter a post code";
                  return false;
              }
              return true;
          }
          function validateDOB()
          {
              if (registerform.dateOfBirth.value === "")
              {
                  document.getElementById('dob').innerHTML = "Please enter a post code";
                  return false;
              }
              return true;
          }
  
  
  
      &lt;/script&gt;
  </code></pre>
  
  <p>HTML FORM</p>
  
  <pre><code>&lt;?php
  require_once("config.php");
  if (!isset($_POST['submit'])) {
      ?&gt;   &lt;!-- The HTML registration form --&gt;
      &lt;form name="registerform"  method="post"&gt;
          Please fill the following form to sign up:&lt;br /&gt;&lt;br /&gt;
  
          Username*: &lt;input type="text" name="username" onKeyup="validate()" onBlur="validateUsername();" /&gt;&lt;span id="uname"&gt;&lt;/span&gt;&lt;br /&gt;
          Password*: &lt;input type="password" name="password" onKeyup="validate()" onBlur="validatePassword();"/&gt;&lt;span id="pword"&gt;&lt;/span&gt;&lt;br /&gt;
          Password Verify*: &lt;input type="password" name="passwordVeri" onKeyup="validate()" onBlur="validatePassword();"/&gt;&lt;span id="pwordv"&gt;&lt;/span&gt;&lt;br /&gt;
          First name: &lt;input type="text" name="firstName" /&gt;&lt;br /&gt;
          Last name: &lt;input type="text" name="lastName" /&gt;&lt;br /&gt;
          Email*: &lt;input type="email" name="emailAddress" onKeyup="validate()" onBlur="validateEmail();"/&gt;&lt;span id="emailAdd"&gt;&lt;/span&gt;&lt;br /&gt;
          Relationship Status*: &lt;select name="relationshipStatus" &gt;
              &lt;option value="Single"&gt;Single&lt;/option&gt;
              &lt;option value="Taken"&gt;Taken&lt;/option&gt;            
          &lt;/select&gt; 
          City*: &lt;input type="text" name="city" onKeyup="validate()" onBlur="validatecity();"/&gt;&lt;span id="userCity"&gt;&lt;/span&gt;&lt;br /&gt;
          Postcode*: &lt;input type="text" name="postCode" onKeyup="validate()" onBlur="validatePostcode();"/&gt;&lt;span id="pCode"&gt;&lt;/span&gt;&lt;br /&gt;
          Mobile number*: &lt;input type="tel" name="mobileNumber" onKeyup="validate()" onBlur="validateMobileNumber();"/&gt;&lt;span id="mobNum"&gt;&lt;/span&gt;&lt;br /&gt;
          Gender*: &lt;select name="gender" &gt;
              &lt;option value="Male"&gt;Male&lt;/option&gt;
              &lt;option value="Female"&gt;Female&lt;/option&gt;            
          &lt;/select&gt;
          Date of Birth*: &lt;input type="date" name="dateOfBirth" onKeyup="validate()" onBlur="validateDOB();"/&gt;&lt;span id="dateOfBirth"&gt;&lt;/span&gt;(Format: DD-MM-YYYY)&lt;br /&gt;
  
          &lt;input type="submit" id="submit" name="submit" value="Register" disabled="disabled"/&gt;
  
      &lt;/form&gt;
      &lt;?php
  </code></pre>