Form Validation Pop-Ups

If you have required fields in a form, a nice visual clue for the user is to have a message ‘pop up’ if the field hasn’t been filled in. A simple example of what I mean can be seen here.

To create the above example, we start off with some straight forward html. The form inputs are all inside <li> elements. This will make it easier to add/position our pop ups later on.

html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Form Validation Pop Ups</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="errorfunction.js"></script>
</head>
<body>
<div>
<h2>Please Register Using The Form Below</h2>
<form id="regform" method="post" action=""> 
<ul>
	<li><label for="username">Username:</label><br />
	<input type="text" id="username" name="username" />
	</li>
	<li><label for="password1">Password:</label><br />
	<input type="password" id="password1" name="password1" />
	</li>
	<li><label for="password2">Confirm Password:</label><br />
	<input type="password" id="password2" name="password2" />
	</li>
</ul>
<p><input type="submit" id="submit" value="Register" /></p>
</form> 
<p id="helper"></p>
</div>
</body>
</html>

The css is similarly simple. The important thing to note is that the <li> elements are given ‘position:relative;’. Our pop ups are then positioned ‘absolutely’ inside these. Also, if you’re eagle-eyed, you may notice that there is a css declaration for ‘p.popup’ yet there aren’t any paragraphs with that class in our html. That’s because we’re going to create the pop ups entirely with JavaScript.

css

* {
	margin:0;
	padding:0;
	}
body {
	font-size: 62.5%;
	font-family:sans-serif;
	background:#c9e1ef;
	}
div {
	padding-top:15px;
	padding-left:15px;
	}
h2 {
	font-size:1.7em;
	font-family:serif;
	margin-bottom:10px;
	}
ul {
	list-style:none;
	margin-bottom:5px;
	}
ul li {
	font-size:1.4em;
	margin-top:10px;
	padding:5px;
	position:relative;
	}
#helper {
	color:#df0d0d;
	margin-top:5px;
	font-size:1.3em;
	}
p.popup {
position:absolute;
height:37px;
width:220px;
background:url(bubble.jpg) top center no-repeat;
color:#fff;
z-index:200;
top:0;
left:190px;
text-align:center;
line-height:35px;
}

The JavaScript is made up of a series of functions. The first one, checkForm(), simply checks all input fields in the form. If any of them haven’t been filled in, a simple message is written underneath the form and the form isn’t submitted.

checkForm()

function checkForm (el) {
		for (var i = 0;i < el.getElementsByTagName('input').length; i++) {
			if (el.getElementsByTagName('input')[i].value == '') {
			document.getElementById('helper').innerHTML = 'Please fill in all of the fields.';
			return false;
			}
		}
	}

The next function, popupCreate(), dynamically creates a <p> element, gives it a class of ‘popup’ and appends it to the parent node of the form input. In other words, it adds it inside the relevant <li> item.

popupCreate()

function popupCreate(input) {
		var popup = document.createElement('p');
		popup.className = 'popup';
		popup.innerHTML = 'Please fill in this field!';
		input.parentNode.appendChild(popup);
	}

popupRemove() checks to see if there is already a ‘popup’ created (basically by seeing if there is a <p> element inside the <li>) and if so, it removes it.

popupRemove()

function popupRemove(input) {
	if(input.parentNode.getElementsByTagName('p').length == 1) {
		input.parentNode.removeChild(input.parentNode.lastChild);
		}
	}

The last function, checkField(), checks the value of an input. If it hasn’t been filled in and a ‘pop up’ doesn’t already exist, it calls the popupCreate() function. Otherwise it calls the popupRemove() function.

checkField()

function checkField(field) {
		if((field.value == '') && (field.parentNode.getElementsByTagName('p').length == 0)) { 
			popupCreate(field)
		} 
		else  {
			popupRemove(field);
		}
	}

At the moment, all we have is a series of functions. To initiate the script, we’ll make use of the window.onload event and an anonymous function. This loops through the form inputs and adds an ‘onblur’ and ‘onfocus’ event for each one which calls the relevant function. It also calls the checkForm() function when the form is submitted.

window.onload

window.onload = function() {
var myform = document.getElementById('regform');
var myformInputs = myform.getElementsByTagName('input');
	for (var i = 0;i < myformInputs.length; i++) {
			myformInputs[i].onblur = function () { checkField(this);};
			myformInputs[i].onfocus = function () { popupRemove(this);};
			} 
		myform.onsubmit = function() {return checkForm(this);};
}

And that, as they say, is that. For simplicity’s sake, this example only checks to see if the fields are ‘empty’ but hopefully it gives you some ideas to play about with Here’s the full JavaScript:

window.onload = function() {
var myform = document.getElementById('regform');
var myformInputs = myform.getElementsByTagName('input');
	for (var i = 0;i < myformInputs.length; i++) {
			myformInputs[i].onblur = function () { checkField(this);};
			myformInputs[i].onfocus = function () { popupRemove(this);};
			} 
		myform.onsubmit = function() {return checkForm(this);};
}
 
function checkForm (el) {
		for (var i = 0;i < el.getElementsByTagName('input').length; i++) {
			if (el.getElementsByTagName('input')[i].value == '') {
			document.getElementById('helper').innerHTML = 'Please fill in all of the fields.';
			return false;
			}
		}
	}
function popupCreate(input) {
		var popup = document.createElement('p');
		popup.className = 'popup';
		popup.innerHTML = 'Please fill in this field!';
		input.parentNode.appendChild(popup);
	}
 
function popupRemove(input) {
	if(input.parentNode.getElementsByTagName('p').length == 1) {
		input.parentNode.removeChild(input.parentNode.lastChild);
		}
	}
 
function checkField(field) {
		if((field.value == '') && (field.parentNode.getElementsByTagName('p').length == 0)) { 
			popupCreate(field)
		} 
		else  {
			popupRemove(field);
		}
	}

The example can be seen here.

Category: Javascript // Make ElanMan happy and be the first to comment.Open my Lovebox

RSS

ElanMan