Validation error messages are pretty easy to handle with jQuery. Introducing the following demo, I'd like to say that this is a very basic template. I concentrated myself only on error messages and not on validation routines per se, so feel free to improve it as you wish. We start with a simple form and with some basic CSS styles:
form {
width: 100%;
margin: 0;
padding: 0.5em 0;
border-top: 5px double #999;
border-bottom: 3px double #999;
}
form input {
font: 1em Verdana, sans-serif;
}
form ul {
height: 100%;
margin: 0;
padding: 0;
list-style: none;
}
form ul li {
height: 100%;
overflow: hidden;
padding-bottom: 5px;
}
form ul li label, form ul li input, form ul li div.error {
float: left;
display: block;
}
form ul li label {
width: 6.5em;
margin-right: 5px;
font-weight: bold;
padding-top: 4px;
}
form ul li input {
width: 140px;
border: 1px solid #999;
margin-right: 5px;
}
form ul li div.error {
height: 100%;
padding: 0.3em;
background: #ffc;
color: #c00;
font-weight: bold;
border: 2px solid orange;
}
form p {
margin: 0;
padding: 0.5em 0;
}
form p input {
background: #666;
color: #fff;
border-color: #999;
font-weight: bold;
}
Each div with class error is inserted in the markup just after each text input element. This is due to accessibility reasons: generating new content with JavaScript can cause some problems to screen readers and, more generally, to devices that don't support JavaScript. Each error message contains meaningful content, so that if JavaScript is disabled or partially supported, our messages will be still available. With this in mind, let's add jQuery:
function checkInvalidCharacters(value) {
return /<|>|\*|\+|\$|°|"|'|\?|\^|£|%|&|\/|\(|\)|=|@|#|§|!|,|;|:|-|_|\[|\]/.test(value);
}
$(document).ready(function() {
$('div.error').hide();
$('#signup input[type=text]').each(function() {
var $input = $(this);
$input.blur(function() {
var $value = $input.val();
var $name = $input.attr('name');
if($name == 'firstname' || $name == 'lastname') {
if(checkInvalidCharacters($value)) {
$input.next().show();
}
}
});
});
});
The function checkInvalidCharacters(value) is an helper function that filters out the majority of special characters (at least those directly inserted with a keyboard). It will be used later. First, we hide all error messages using the hide()
method of jQuery. Then we iterate over each text input of the form and we check if an user has inserted correct values. To do this,
we perform our check when an user leaves a field (either with the mouse or the Tab button) by using the blur event that, as you know, takes place when an input field loses focus. To validate a field, we use our helper function declared previously.
To show the error messages, we use the next() method together with the show() method. The former will select the element adjacent to a field (that is, our error message), while the latter will actually show that element. The most difficult part in this demo is the use of function scope. If you take a closer look to the variables $value and $name, you'll notice that they're actually inside the second inline function. Because of the function scope, you can't put them one level above, because they won't work.
You can see the final result here.