jQuery form validation

Posted on May 24, 2010

We start with a basic form like this:

<form action="#" method="post">

<fieldset>

<legend>Contact information</legend>

<ul>

<li>
 <label for="name">Name:</label>
 <input type="text" name="name" id="name" />
</li>

<li>
 <label for="surname">Surname:</label>
 <input type="text" name="surname" id="surname" />
</li>

<li>
 <label for="email">Email:</label>
 <input type="text" name="email" id="email" />
 
</li>

<li>
 <label for="subject">Subject:</label>
 <input type="text" name="subject" id="subject" />
</li>

<li>
 <label for="message">Message:</label>
 <textarea id="message" name="message" cols="30" rows="15"></textarea>
</li>


</ul>


<p><input type="submit" name="send" id="send" value="Send" /></p>

</fieldset>


</form>

Then we add some basic styles, just to stylize the form a little bit:

body {
 background: #fff;
 color: #333;
 font: 76% Verdana, sans-serif;
}

form {
 margin: 1em 0 0 2em;
 width: 50%;
}

fieldset {
 margin: 0;
 border: 1px solid #ccc;
 padding-bottom: 1em;
}

legend {
 font-weight: bold;
 text-transform: uppercase;
}

fieldset ul {
 margin: 0 auto;
 padding: 0.5em 0;
 width: 90%;
 list-style: none;
}

fieldset ul li {
 overflow: hidden;
 height: 100%;
 padding: 4px 0;
}

label {
 float: left;
 width: 5em;
 padding-right: 0.3em;
 font-weight: bold;
}

input {
 font: 1em Verdana, sans-serif;
}

fieldset ul li input {
 float: left;
 width: 120px;
 border: 1px solid #ccc;
}

textarea {
 width: 300px;
 height: 200px;
 border: 1px solid #ccc;
 font: 1em Verdana, sans-serif;
}

form p {
 margin: 0;
 padding: 0.4em 0 0 7em;
}

form p input {
 background: #666;
 color: #fff;
 font-weight: bold;
}

You can see this basic page here. After setting our base template, we can start to add a little more interaction by providing a simple JavaScript function that will handle the form processing (of course we're doing it with JavaScript only for demonstrative purpose). Before this, we need to add some styles to our stylesheet:

/* JavaScript styles */

ol#data {
 margin: 1em 0;
 padding: 0.3em;
 background: #e7e7e7;
 border: 1px solid #666;
 list-style: none;
}

ol#data li {
 margin: 0.3em 0;
 padding: 3px;
 background: #fff;
}

ol#data li strong {
 display: block;
}
ol#data li p {
 margin-top: 0;
 padding: 0;
}

Then we can write our little script:

function process() {
 var name = $('#name').val();
 var surname = $('#surname').val();
 var email = $('#email').val();
 var subject = $('#subject').val();
 var message = $('#message').val();
 
 var $ol = $('<ol id="data"></ol>').appendTo('form[method=post]');
 $ol.html('<li><strong>Name:</strong><p> ' + name + '</p></li>' +
       '<li><strong>Surname:</strong><p> ' + surname + '</p></li>' + 
       '<li><strong>Email:</strong><p> ' + email + '</p></li>'
        + '<li><strong>Subject:</strong><p> ' + subject + '</p></li>' + 
        '<li><strong>Message:</strong><p>' +
        message + '</p></li>');
}


$(document).ready(function () {
 $('form[method=post]').attr('action', 'javascript:process()');
});

You can see the page in action here. Notice that we're not validating the form yet. First, we need to add a couple of styles to our CSS:

div.error {
 clear: left;
 margin-left: 5.3em;
 color: red;
 background: transparent url("../../img/error.png") no-repeat 100% 0;
 padding-right: 1.3em;
 height: 100%;
 padding-bottom: 0.3em;
 line-height: 1.3;
}

.input-error {
 background: #ff9;
 border: 1px solid red;
}


div.warning {
 clear: left;
 margin-left: 5.3em;
 color: #338;
 background: transparent url("../../img/warning.png") no-repeat 100% 0;
 padding-right: 1.3em;
 height: 100%;
 padding-bottom: 0.3em;
 line-height: 1.3;
}

Then we can write our validation routines with jQuery:

var validateForm = function(){
 var $name = $('#name').val(); 
 var $nameRe = /^[a-zA-Z]{2,20}$/;
 if(!$nameRe.test($name)) {
   
  handleError('#name', 'The name field must contain only letters and cannot be less than 2 characters.');
 
   
 }
 
 var $surname = $('#surname').val();
 var $surnameRe = /^[a-zA-Z]{3,20}$/;
 if(!$surnameRe.test($surname)) {
  
  handleError('#surname', 'The surname field must contain only letters and cannot be less than 3 characters.');
   
   
 } 
  
 
 var $email = $('#email').val();
 var $emailRe = /^[a-z-0-9_+.-]+\@([a-z0-9-]+\.)+[a-z0-9]{2,7}$/i;
 if(!$emailRe.test($email)) {
   
  handleError('#email', 'This is not a valid email address.');
   
 }

 var $subject = $('#subject').val();
 var $subjectRe = /^\s+|<|>|"|\$|&|\/|'|\*|#|@|\\|\.\.|\./;
 if($subject.length == 0 || $subjectRe.test($subject)) {
   
  handleError('#subject', 'The subject field cannot be empty or contain special characters.');
 }
  
 var $message = $('#message').val();
 var $messageRe = /^\s+$/;
 if($message.length == 0 || $messageRe.test($message)) {
   
  handleError('#message', 'The message field cannot be empty.');
 }
  
 if($nameRe.test($name) && 
  $surnameRe.test($surname) && 
  $emailRe.test($email) &&
  $subject.length > 0 &&
  !$subjectRe.test($subject) &&
  $message.length > 0 &&
  !$messageRe.test($message)) {
   return true;
  } else {
   return false;
 }
  
}

function handleError(element, message) {
 element = $(element);
 element.addClass('input-error');
 var $li = element.parent('li');
 var error = $('<div class="error"></div>').text(message);
 error.appendTo($li);
 $(element).keyup(function() {
  $(error).fadeOut(1000, function() {
    $(element).removeClass('input-error');
  });
 });
 
}

function handleWarning(element, message) {
 element = $(element);
 var $li = element.parent('li');
 var warning = $('<div class="warning"></div>').text(message);
 warning.appendTo($li);
}
   


$(document).ready(function() {
 $('form[method=post] :input').each(function() {
  var $input = $(this);
  $input.focus(function() {
  if($('div.error').size()) {return;}
  if($input.attr('id') == "name") {
   handleWarning($input, 'The name field must contain only letters and cannot be less than 2 characters.');
  } else if($input.attr('id') == "surname") {
   handleWarning($input, 'The surname field must contain only letters and cannot be less than 3 characters.');
  } else if($input.attr('id') == "email") {
   handleWarning($input, 'Enter a valid email address, such as name@example.com.');
  } else if($input.attr('id') == "subject") {
   handleWarning($input, 'The subject field cannot be empty or contain special characters.');
  } else if($input.attr('id') == "message") {
   handleWarning($input, 'The message field cannot be empty.');
  }
 });
 $input.blur(function() {
  $('div.warning').fadeOut(1000);
 });
});
 $('form[method=post]').submit(validateForm);
 
});

The above routines perform the following tasks:

  • create error and warning messages
  • create a routine to handle errors
  • create a routine to handle warnings
  • validate user input

You can see the live demo here. Optionally, we could add even more validation routines, but I think that for the sake of simplicity the aforementioned ones will suffice.

Leave a Reply

Note: Only a member of this blog may post a comment.