Form Validation: Avoid Frustration for You and Your Customers
Without functional and clear client-side validation, an online form becomes next to useless. Client-side validation checks the form when the user presses the submit button and does not allow it to go through until it passes all validation checks. Some of the simplest checks see if the user has filled out all the fields, but increasing your validation clarity and scope beyond the basics can make a form easier for a customer to fill out properly. 
Red fields are immediately recognizable as required.
Form Error Messages
The previously popular method of showing errors for a form was with an alert box, a method that has become outdated with the easy-to-use jQuery library. An error message should always be shown next to or below the field it represents, to make things easy for your customers. Using traditional stop-slow-go colours can make a design a less visually appealing, but can simplify error recognition. A user can easily distinguish a red field as being bad, and a green one as being good. Don’t ever leave the user hunting for the problem – show them exactly where it is. One nice addition you can add to your form is to animate the page to the first error message by using the jQuery animate and scrollTop function. Error messages should always say exactly what format the field is looking for. Telling the customer that their entry is simply invalid is not enough and can easily become frustrating when the required format is not clear.
Keyup validation gives immediate results.
Keyup Validation
A nice addition to your forms is validating on keyup rather than only on submit for text fields. This means the field a user is working on is checked as they type, giving them immediate feedback. A simple way to do this is turn a field green when it validates, or red until it does.
Don’t make phone numbers a hassle for customers.
Validating Phone Numbers
Online forms often require a certain format, often shown in the label or error message as something similar to XXX-XXX-XXXX. This can be aggravating to the user, especially if they are trying to enter a normally valid format such as (XXX) XXX-XXXX, which would produce an error. Luckily, there’s a great way to avoid this problem. The first step is to not ask for a format at all! Once a customer has typed in a value, use a jQuery replace function to delete all symbols, letters and spaces so the field is only left with numbers. After you’ve done that, simply check if there is at least 10 characters left in the field.
Validating Email Addresses
Email addresses can be tricky to validate because they’re more complicated than a simple text field. The way to check if a customer has entered an email address is by using the jQuery filter function to see if they have entered an @ symbol sometime after the first character, a period sometime after the characters after the @ symbol, and at least two characters after the period. Phew! A very handy premade filter for this formula is /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/.
Could you please ship it to 18500 111st Select a Country?
Validating Dropdowns
Make sure a customer cannot choose an identifier as a valid option (for example, don’t let them choose “Choose an Option” from the dropdown). This can be done by checking the dropdown value against any identifier values.
Less guessing equals more successfully filled out forms.
Reduce Guessing and Increase Conversions
Although server-side validation can be important for security, proper client-side validation is more responsive and more useful to the customer. By using all the tips above you will wind up with a form that is both clear and easy to fill out and submit. The key to a good form is to keep things simple as well as obvious – from the general layout to the final validation.
