title: How do I add checks to make the code to display 'Password too short' and 'Height is not a number?'
body: <p>I have to add checks to the <code>checkSubmit()</code> function so that it will give the following response</p>
  
  <ol>
  <li>Passwords do not match</li>
  <li>Passwords is too short(minimum 4 characters)</li>
  <li>Height is not a number</li>
  </ol>
  
  <p>I have managed the first one however I have no idea where to start with the other two. I'll post all the code just to be safe in case I missed something.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;title&gt;Form Validation&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles/styles.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="styles/forms.css"&gt;
      &lt;script type="text/javascript"&gt;
  
      window.onload=init;
      var form;
          function init() {
              form = document.getElementById('testform');
              form.addEventListener("submit", checkSubmit, false);
              form.addEventListener("reset", checkReset, false);
  
              form['colour'].addEventListener("change", checkSubmit, false);
  
              form['name'].focus();
          }
          String.prototype.trim=function() {
              return this.replace(/^\s+1\s+$/g, '');
          }
          function whichButton(name) {
              var buttons=document.getElementsByName(name);
              for (var i in buttons) {
                  if(buttons[i].checked) return buttons[i].value
              }
              return false;
          }
          function showOtherColour() {
              document.getElementById('othercolour').style.visibility=
                  form['colour'].value=='other' ? 'visible' : 'hidden';
          }
          function checkSubmit() {
              error = new Array();
              //Fill the array with the error value
  
              form['name'].value=form['name'].value.trim();
              form['email'].value=form['email'].value.trim();
              form['town'].value=form['town'].value.trim();
              form['state'].value=form['state'].value.trim();
              form['postcode'].value=form['postcode'].value.trim();
              form['dob'].value=form['dob'].value.trim();
              form['height'].value=form['height'].value.trim();
  
              //Check required fields
              if(!form['name'].value)
                  error.push('Missing Name');
              if(!form['email'].value)
                  error.push('Missing Email Address');
              if(!form['password'].value)
                  error.push('Missing Password');
  
              //Check valid email address
              var pattern=/^[a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+(\.[a-zA-Z]{2,4})$/;
              if(!form['email'].value.match(pattern))
                  error.push('Invalid Email Address');
  
              //Check State
  
              //Check Post Code has 4 digits
              var pattern=/^\d{4}$/;
              if(!form['postcode'].value.match(pattern))
                  error.push('Invalid Post Code');
              //Check password matches confirmation
              //var password = ;
              /*
              if(!form['passwordConfirm'].value.match(password)){
                  error.push("Passwords don't match");
              }*/
  
              console.log(form['confirm'].value);
              console.log(form['password'].value);
              if(!form['confirm'].value.match(form['password'].value)){
                  error.push('Passwords do not match');
              }
  
              //Check that one Gender item is selected
              if(whichButton('gender')===false)
                  error.push('Please choose a Gender');
  
              //Check that "Other" field is filled
              if (!form['colour'].value ||
                  (form['colour'].value=='other' &amp;&amp; !form['othercolour'].value))
                  error.push('Colour is not selected');
  
              if(error.length) { // if there are errors
              alert(error.join("\n"))
              return false;
              }
              else return true;
  
              //return confirm("This will submit the form"); //Temporary placeholder
          } 
          function checkReset() {
              return confirm("This will clear the form data");
          }
      &lt;/script&gt;
  &lt;style type="text/css"&gt;
  body,td,th {
      font-size: 0.9em;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="body"&gt;
      &lt;h1&gt;Form Validation&lt;/h1&gt;
      &lt;form action="http://test.miform.net" method="post" id="testform"&gt;
      &lt;fieldset&gt;
          &lt;label&gt;Name&lt;br&gt;&lt;input type="text" name="name" class="wide"&gt;&lt;/label&gt;
          &lt;label&gt;Email Address&lt;br&gt;&lt;input type="text" name="email" class="wide"&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;label&gt;Address&lt;br&gt;&lt;input type="text" name="street" class="wide"&gt;&lt;/label&gt;
          &lt;label&gt;Town&lt;br&gt;&lt;input type="text" name="town" class="narrow"&gt;&lt;/label&gt;
          &lt;label&gt;State&lt;br&gt;&lt;input type="text" name="state" class="narrow"&gt;&lt;/label&gt;
          &lt;label&gt;PostCode&lt;br&gt;&lt;input type="text" name="postcode" class="narrow"&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;label&gt;Password&lt;br&gt;&lt;input type="password" name="password" class="medium"&gt;&lt;/label&gt;
          &lt;label&gt;Confirm Password&lt;br&gt;&lt;input type="password" name="confirm" class="medium"&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;label&gt;Date of Birth&lt;br&gt;&lt;input type="text" name="dob" class="medium"&gt;&lt;/label&gt;
          &lt;label&gt;Height&lt;br&gt;&lt;input type="text" name="height" class="medium"&gt;&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;legend&gt;Gender&lt;/legend&gt;
          &lt;label&gt;&lt;input type="radio" name="gender" value="f"&gt;Female&lt;/label&gt;
          &lt;label&gt;&lt;input type="radio" name="gender" value="m"&gt;Male&lt;/label&gt;
      &lt;/fieldset&gt;
      &lt;fieldset&gt;
          &lt;label&gt;Colour
              &lt;select name="colour"&gt;
                  &lt;option value=""&gt;Select...&lt;/option&gt;
                  &lt;option value="black"&gt;Black&lt;/option&gt;
                  &lt;option value="white"&gt;White&lt;/option&gt;
                  &lt;option value="red"&gt;Red&lt;/option&gt;
                  &lt;option value="green"&gt;Green&lt;/option&gt;
                  &lt;option value="blue"&gt;Blue&lt;/option&gt;
                  &lt;option value="cyan"&gt;Cyan&lt;/option&gt;
                  &lt;option value="magenta"&gt;Magenta&lt;/option&gt;
                  &lt;option value="yellow"&gt;Yellow&lt;/option&gt;
                  &lt;option value="other"&gt;Other&lt;/option&gt;
              &lt;/select&gt;
          &lt;/label&gt;
          &lt;input type="text" id="othercolour"&gt;
      &lt;/fieldset&gt;
          &lt;input type="reset" name="reset" value="Clear Form"&gt;
          &lt;input type="submit" name="send" value="Send Off"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>