The below is part of a university assignment where we had to create a contact form with the fields and attributes:

  • Name – a required field
  • Email – a required field
  • Message – a required field
  • Submit button

The form needed to use JavaScript to validate the field was not empty, if the field was not valid a simple error message was to be displayed. The email address also needed to be validated by using a regular expression.

The Contact Form HTML

<form onsubmit="return checkForm();" method="post" action="mailto:YOUR EMAIL ADDRESS HERE">
  <div class="contact_name">
    <span class="contact_label">Name:*</span>
    <input type="text" id="name" /><br />
    <div class="error" id="nameError">Required: Please enter your name<br /></div>
  </div> <!-- .contact_name ends -->

  <div class="contact_email">
    <span class="contact_label">Email:*</span>
    <input type="text" id="email" /><br />
    <div class="error" id="emailError">Required: Please enter your email address<br /></div>
  </div> <!-- .contact_email ends -->

  <div class="contact_comment">
    <span class="contact_label">Message:*</span>
    <textarea id="comment" rows="10" cols="35"></textarea>
    <div class="error" id="commentError">Required: Please enter a message<br /></div>
  </div> <!-- .contact_comment ends -->

  <div class="contact_submit">
    <input type='submit' value='Submit' />
  </div> <!-- .contact_submit ends -->
  <p><span class="contact_nb">NB: * Donotes required field</span></p>
</form>

The JavaScript To Validate The Contact Form

For this example I saved the below code in a file named contact-validation.js in the root directory. This relates to the last step when you need to link to the file from the head of your page.

function checkForm() {
 name = document.getElementById("name").value;
 email = document.getElementById("email").value;
 comment = document.getElementById("comment").value;

 if (name == "")
 {
 hideAllErrors();
 document.getElementById("nameError").style.display = "inline";
 document.getElementById("name").select();
 document.getElementById("name").focus();
 return false;
 }
 else if (email == "")
 {
 hideAllErrors();
 document.getElementById("emailError").style.display = "inline";
 document.getElementById("email").select();
 document.getElementById("email").focus();
 return false;
 }
 else if (comment == "")
 {
 hideAllErrors();
 document.getElementById("commentError").style.display = "inline";
 document.getElementById("comment").select();
 document.getElementById("comment").focus();
 return false;
 }
 if (!checkEmail(email))
 {
 alert('Email address is invalid');
 return false;
 }
 return true;
}

function hideAllErrors() {
 document.getElementById("nameError").style.display = "none";
 document.getElementById("emailError").style.display = "none";
 document.getElementById("commentError").style.display = "none";
}

function checkEmail(inputvalue) {
 var pattern = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
 return pattern.test(inputvalue);
}

Place This In The Head Of Your Page HTML

If you use this code snippet, but saved the JavaScript above in a different file name, you will need to change the below source link, eg, src=”../your-file-name.js”

<script type="text/javascript" src="../contact-validation.js"></script>

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>