SAM GREY
FRONT END WEB DEVELOPER
OBJECTIVE
To create, style, and validate a form.
MY THOUGHT PROCESS
Initially, I expected that I would build the form in HTML5, experimenting with some of the new input types, perform data validation in javascript/jquery, and be good to go. In the course of my research I realized that client-side and server-side data validation serve different goals. The primary concern for server-side validation is to sanitize the incoming (and untrustworthy) data.
Client-side validation, on the other hand, ought to be about improving the user experience. A better user experience leads to better conversion rates, by creating a more trustworthy environment for the user while also allowing them to fill the form faster.
Keeping this in mind, I could dispense with a fair amount of the code I expected to have to write, relying instead on a combination of data validation provided by most modern browsers, and on my own server-side validation. I then made two additions to improve the user experience: street address autocompletion and credit card number validation. Both rely on external libraries and API’s.
I chose Smartystreet’s API over the USPS API primarily because of the address autocomplete functionality: the fewer keystrokes a user needs to make, the better. Plus, the service is faster than the USPS one, and my use case (learning exercise) fit the pricing model (free) quite well. In a live app environment, the speed and additional functionality may have to be sacrificed due to the service pricing.
Then, the JQuery Credit Card Validator does away with the need for the user to specify what kind of card they are using, and provides a very basic check to ensure that they’ve entered the number correctly. The actual number, CVV, and expiration date verification will happen server-side.
RESOURCES
Making Forms Fabulous with HTML5
Bring Your Forms up to Date with HTML5 Validation
Have a Field Day with HTML5 Forms
Web Forms: Dive Into HTML5
SmartyStreets API
JQuery Credit Card Validator