Bring Your Forms Up to Date With CSS3 and HTML5 Validation. Let's look at how to create a functional form which validates users' data, client-side.
With that done, we'll cover prettying it up using CSS, including some CSS3! First we want to conceptualize what our form is going to look like and how it is going to function. For this example, let's create a simple contact form that asks for the following information from the user: Name Email Website Message. Form-Field Validation: The Errors-Only Approach. Advertisement Error pages for form-field validation are dreadful.
You’ve just filled out 20 form fields, yet you get the same bloated page thrown back in your face because a single field failed to validate. I clearly recall the often loud sighs of despair during our last usability study each time a test subject encountered a validation error page. We also noticed that test subjects who had been exposed to validation errors began to take preventive actions to avoid them in subsequent steps, by writing things such as “N/A” in the “Company name” field if in doubt about whether the field was optional.
When getting the exact same page but with an error message, the user will feel they have made little or no progress, despite having typed 90% of the form fields correctly. SignupTwitter Bootstrap Tutorial.