“Forms suck!” these are the first two words of a great form design book, “Web Form Design: Filling in the Blanks,” by Luke Wroblewski.

Let’s face it, filling out a form does suck. Whether you are renewing your drivers license or buying a book on amazon.com, discovering you incorrectly filled out a form is annoying, multiply that by ten when you are using an online form.

You spend a minute filling in a registration form only for the browser to refresh and display an error message telling you, the “I agree to the terms” box must be checked. So you check the box and try to submit it again. Now you receive an error message saying that adding a password is required. You get this error because when the form refreshed the first time, it emptied your password fields. So you spend the next 15 seconds trying to understand what happened and how to fix it. Adding your password again and reviewing that you have all the fields that have little tiny red stars next to them completed, takes another 20 seconds. Oh yeah, don’t forget to agree to the terms and conditions again before submitting.

“discovering you incorrectly filled out a form is annoying, multiply that feeling by ten when you are using an online form”

After all this, 8 minutes has passed and you don’t even feel like using the application you were signing up for. Frustrated, you leave your desk for a break or jump to YouTube for a couple laughs to get you back in the mood to play around with the application you meant to in the first place.

We should be setting our users up for success, not failure.

Placing the form validation logic on the client-side reduces the time to completion of the form by giving the user an efficient way to get through the form. Doing so also makes the user feel smart and plants a seed in their mind they are using a credible website, building trust that their information is secure. So when they click the submit button, they are successful in their first try.

A jQuery plugin for form validation, written by Jorn Zaefferer, makes doing this very easy. Here’s the code for my demo of a simple account creation form:

(x)HTML

<form id="signupForm" method="get" action="">
    <fieldset>
        <legend>Sign up for our service</legend>
        <p>
            <label for="fullname">Full Name</label>
            <input id="fullname" name="fullname" />
        </p>
        <p>
            <label for="email">Email</label>
            <input id="email" name="email" />
            <span class="gray italic smaller" style="display:block">example@me.com</span>
        </p>
        <fieldset class="loginInfo">
            <p class="first-child">
                <label for="username">Username</label>
                <input id="username" name="username" />
                <span class="gray italic smaller" style="display:block">Two character minimum</span>
            </p>
            <p>
                <label for="password">Password</label>
                <input id="password" name="password" type="password" />
            </p>
            <p class="last-child">
                <label for="confirm_password">Confirm password</label>
                <input id="confirm_password" name="confirm_password" type="password" />
            </p>
        </fieldset>
        <p>
            <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" />
            <label for="newsletter" class="optionLabel">I'd like to receive the newsletter</label>
        </p>
        <p class="smaller">
            By signing up you agree to <a href="#">our terms</a> of service.
        </p>
        <p class="last-child">
            <input class="submit" type="submit" value="I agree, sign me up!"/>
        </p>
    </fieldset>
</form>

JavaScript

$("#signupForm").validate({
	rules: {
		fullname: "required",
		username: {
			required: true,
			minlength: 2
		},
		password: {
			required: true,
			minlength: 5
		},
		confirm_password: {
			required: true,
			minlength: 5,
			equalTo: "#password"
		},
		email: {
			required: true,
			email: true
		}
	},
	messages: {
		fullname: "Please enter your full name",
		username: {
			required: "Please enter a username",
			minlength: "Your username must consist of at least 2 characters"
		},
		password: {
			required: "Please provide a password",
			minlength: "Your password must be at least 5 characters long"
		},
		confirm_password: {
			required: "Please provide a password",
			minlength: "Your password must be at least 5 characters long",
			equalTo: "Please enter the same password as above"
		},
		email: "Please enter a valid email address"
	}
});

View demo

Leave a Reply