title: Contact form validation javascript
body: <p>Yesterday I was following a tutorial for client-side validation using regular expressions. It worked well for the most part. I cannot figure out what I changed for this to stop working.</p>
  
  <p>Basically, I don't think the form should be submitting at all, even if it passes validation. When I click submit and all fields are empty, they should all show the error message, but only the name field does. With error messages displayed, the form will still submit</p>
  
  <p>HTML</p>
  
  <pre><code>  &lt;form&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label for="contact-name"&gt;Name&lt;/label&gt;
              &lt;input type="text" class="form-control" id="contact-name" name="name"       placeholder="Enter your name.." onkeyup='validateName()'&gt;
              &lt;span class='error-message' id='name-error'&gt;&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label for="contact-phone"&gt;Phone Number&lt;/label&gt;
              &lt;input type="tel" class="form-control" id="contact-phone" name="phone" placeholder="Ex: 1231231234" onkeyup='validatePhone()'&gt;
              &lt;span class='error-message' id='phone-error'&gt;&lt;/span&gt;
            &lt;/div&gt;
  
            &lt;div class="form-group"&gt;
              &lt;label for="contact-email"&gt;Email address&lt;/label&gt;
              &lt;input type="email" class="form-control" id="contact-email" name="email" placeholder="Enter Email" onkeyup='validateEmail()'&gt;
              &lt;span class='error-message' id='email-error'&gt;&lt;/span&gt;
            &lt;/div&gt;   
  
            &lt;div class="form-group"&gt;
              &lt;label for='contactMessage'&gt;Your Message&lt;/label&gt;
              &lt;textarea class="form-control" rows="5" id='contact-message'  name='message'  placeholder="Enter a brief message" onkeyup='validateMessage()'&gt;&lt;/textarea&gt;
              &lt;span class='error-message' id='message-error'&gt;&lt;/span&gt;
            &lt;/div&gt;
  
          &lt;button onclick='validateForm()' class="btn btn-default"&gt;Submit&lt;/button&gt;
          &lt;span class='error-message' id='submit-error'&gt;&lt;/span&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>function validateName() {
  
    var name = document.getElementById('contact-name').value;
  
    if(name.length == 0) {
  
      producePrompt('Name is required', 'name-error' , 'red')
      return false;
  
    }
  
    if (!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)) {
  
      producePrompt('First and last name, please.','name-error', 'red');
      return false;
  
    }
  
    producePrompt('Valid', 'name-error', 'green');
    return true;
  
  }
  
  function validatePhone() {
  
    var phone = document.getElementById('contact-phone').value;
  
      if(phone.length == 0) {
        producePrompt('Phone number is required.', 'phone-error', 'red');
        return false;
      }
  
      if(phone.length != 10) {
        producePrompt('Include area code.', 'phone-error', 'red');
        return false;
      }
  
      if(!phone.match(/^[0-9]{10}$/)) {
        producePrompt('Only digits, please.' ,'phone-error', 'red');
        return false;
      }
  
      producePrompt('Valid', 'phone-error', 'green');
      return true;
  
  }
  
  function validateEmail () {
  
    var email = document.getElementById('contact-email').value;
  
    if(email.length == 0) {
  
      producePrompt('Email Invalid','email-error', 'red');
      return false;
  
    }
  
    if(!email.match(/^[A-Za-z\._\-[0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)) {
  
      producePrompt('Email Invalid', 'email-error', 'red');
      return false;
  
    }
  
    producePrompt('Valid', 'email-error', 'green');
    return true;
  
  }
  
  function validateMessage() {
    var message = document.getElementById('contact-message').value;
    var required = 30;
    var left = required - message.length;
  
    if (left &gt; 0) {
      producePrompt(left + ' more characters required','message-error','red');
      return false;
    }
  
    producePrompt('Valid', 'message-error', 'green');
    return true;
  
  }
  
  function validateForm() {
    if (!validateName() || !validatePhone() || !validateEmail() || !validateMessage()) {
      jsShow('submit-error');
      producePrompt('Please fix errors to submit.', 'submit-error', 'red');
      setTimeout(function(){jsHide('submit-error');}, 2000);
    }
    else {
  
    }
  }
  
  function jsShow(id) {
    document.getElementById(id).style.display = 'block';
  }
  
  function jsHide(id) {
    document.getElementById(id).style.display = 'none';
  }
  
  
  
  
  function producePrompt(message, promptLocation, color) {
  
    document.getElementById(promptLocation).innerHTML = message;
    document.getElementById(promptLocation).style.color = color;
  
  
  }
  </code></pre>
  
  <p>I understand this isn't set up to actually send anything to PHP. I believe the javascript code should work find as there was nothing changed, but the HTML has. </p>