Thursday, November 19, 2015

3 Forms That Validate Input

Javascript is key to user interaction on webpages, and forms are perhaps the most ubiquitous way that users interact informationally with a webpage. However, the key to successful form implementation is to ensure that the proper information is submitted. This is called Form Validation. Below you will see 3 different examples of Form Validation throughout the web.

Craiglist

When posting on craigslist there are certain types of information required. As you can see below, when that information is not submitted, craigslist offers some very literal feedback to the user when the input is incorrect or incomplete. It seems this type of feedback could be achieved by using CSS to change the color, BOLDness, and border of a given object to emphasize its attention

http://bend.craigslist.org/(click the "post to classified" button)


Amazon
When joining Amazon you need to provide a minimum of information. However, as you can see below, while Chuck Norris can enter most of his information correctly, when he tries to enter his favorite password "RHK"(round house kick), Amazon rejects it because it is too short. Unlike the first example, Amazon's page only makes a dialog box appear stating that the information is incorrect instead of highlighting the fields.





Boston Globe
The Boston Globe's web developers are not very motivated. When you incorrectly fill in the below form on their website, the is barely any feedback. Instead of the two conspicuous examples we saw above, this form only appears a small, barely notable line of text that say that all the fields are necessary. This was likely done with a simple <span> and simple javascript. Shame on you lazy web developers!





  

1 comment: