Adding forms, styling then, and validating them is a very common task for a web designer. As a web designer, you therefore should have a go to strategy of these tasks. This stock strategy should at least include: a form.css file, to add basic styling and provide basic layout of a form; and a form validator script, some modular Javascript plug-in or class that handles form validation.


I have provided a basic example form that requires the user to enter a username and password to help explain this process.
View Example

The CSS

The form CSS will define the basic styling that all forms will use. This would include at least styling of select and input elements. There should also be definitions here for class used by the valuator script. You could go further and add layout definitions to handle common form usage.


form.css

form
{
	font-family: Arial, Helvetica, sans-serif;
}

form label.error, label.error {
	display: block;
	width: 200px;
	color: #900;
	font-weight: bold;
	font-size: 12px;
	margin: 0 0 0 153px;
	padding: 0px;
	text-align:left;
}

form label {
	display: inline-block;
	vertical-align: top;
	cursor: hand;
	line-height: 25px;
	width: 150px;
	text-align: right;
}

form .multi label
{
	display: inline;
}

form  p {
	list-style: none;
	margin: 0 0 10px 0;
}

form .btns
{
	margin: 0 0 0 153px;
}

form .btn
{
	width: 75px;
	padding: 10px;
	margin-right: 10px;
	color: #FFF;
	background: #666;
	cursor: pointer;
	border: none;
}

form .btn:focus
{
	border: none;
	margin: 0 10px 0 2px;
}

form .btn:hover
{
	background: #333;
}

select
{
	padding: 3px; border:
	1px solid #000;
	width: 200px;
	margin: 2px;
}
select:focus { border: 3px solid black; margin: 0px;}
select.error { border: 3px solid #900; margin: 0px;}
textarea { padding: 3px; border: 1px solid #000;  margin: 2px;}
textarea:focus { border: 3px solid black; margin: 0px;}
textarea.error { border: 3px solid #900; margin: 0px;}

input
{
	padding: 3px;
	border: 1px solid #000;
	width: 200px;
	margin: 2px;
}
input:focus { border: 3px solid black; margin: 0px;}
input.error { border: 3px solid #900; margin: 0px;}
form .gray * { color: gray; }

div.error { display: block; }

Page specific CSS for the form will most likely be included in the pages CSS file. If dealing with a very complex form it may need its own file. This is the styling that would not be stock but written each time a form is added to a site. This would include layout and styling beyond the basics to customize the form to the specific site.


login.css

#loginform
{
	padding: 25px;
	margin: 0 auto 0 auto;
	background: #99C;

}

#invalid
{
	color: #FFF;
	background-color: #900;
	padding: 5px 5px 5px 25px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

The Javascript

My default for form validation is the jquery validate plugin. I usually also use the jquery form plug for making the AJAX request for the form. The validate plugin has a simple API that provides just about all types of validation a form may need.

For the page specific Javascript I have created a class named Form that has two methods one that handles the validation and one that handles the submission. For this example I have added the rules and messages for the validate plug that require a minimum length and matching passwords. When the form is both submitted and valid the plug-in’s submitHandler method is called which in turn calls the Form class’s submitForm method. This method uses the form plug to submit the form to url in the forms action attribute.


login.js

var yourSitesNamespace = {};

yourSitesNamespace.loginPage =
{
	form: null,
	onReady: function()
	{
		this.form = new Form();
		this.form.validate();
	}
};

/**
 * Form Class
 * validates using jquery.validate
 * submits using jquery.form
 * both must be included
 */
function Form(url)
{
}

Form.prototype =
{
	validate: function()
	{
		$("#loginform").validate({
			invalidHandler: function(form)
			{
				$("#invalid").remove();
				$("#loginform").before("<div id='invalid'>Please fill in all required fields.</div>");
			},
			submitHandler: function(form)
			{
				this.submitForm(form);
			},
			rules:
			{
				username: {
					required: true,
					minlength: 5
				},
				password: {
					required: true,
					minlength: 5
				},
				password2: {
					required: true,
					minlength: 5,
					equalTo: "#password"
				}
			},
			messages: {
				username: {
					required: "username is required",
					minlength: "minimum length is 5 characters"
				},
				password: {
					required: "password is required",
					minlength: "minimum length is 5 characters"
				},
				password2: {
					required: "password confirm is required",
					minlength: "minimum length is 5 characters",
					equalTo: "passwords don't match"
				}
			}
		});
	},

	submitForm: function(form)
	{
		$(form).ajaxSubmit(function(success)
		{
			if(success == 1)
			{
				//handle success
			}
			else
			{
				//handle error
			}
		});
	}
};

$(document).ready(function()
{
	yourSitesNamespace.loginPage.onReady();
});

Putting it all together

Here is the login page itself.


index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="javascript/jquery-1.3.2.js"></script>
<script type="text/javascript" src="javascript/jquery.validate.js"></script>
<script type="text/javascript" src="javascript/jquery.form.js"></script>
<script type="text/javascript" src="javascript/login.js"></script>

<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/form.css" rel="stylesheet" type="text/css" />
<link href="css/login.css" rel="stylesheet" type="text/css" />
</head>

<body>

<form id="loginform" action="login.php" method="post">
<p>
<label>username: </label>
<input id="username" name="username" type="text" />
</p>
<p>
<label>password: </label>
<input id="password" name="password" type="password" />
</p>
<p>
<label>confirm password: </label>
<input id="password2" name="password2" type="password" />
</p>
<p class="btns">
<input type="submit" value="Enter" class="btn" />
<input type="reset" class="btn" />
</p>
</form>
</body>
</html>