Have you ever gotten that feeling where you go to a website and can easily fill out all the information needed without any issues? A website where you actually enjoy how organized, smooth, and clean everything looks and feels? A website where you know exactly what to do, how to input the data, and the page flows and you can fill it out without moving your hands from the keyboard or touching the mouse? Websites like that are hard to find because there is a tremendous amount of work going on behind the scenes to make that user experience happen.
Data Validation
Data needs validation to ensure that the system is running on correct, clean data that can be used across the whole system. Imagine how confusing it must be to input the date in different formats throughout the same website: you get a date picker with a calendar in one screen, yet you have to manually enter the dates in another. You aren’t sure if you should use 12/15/2015 or 12.15.2015 or Dec 15, 2015, or any other format.
A good form will force the user to input the date in the correct format, standardizing their way of documenting dates, and making the user’s experience go smoothly. The same principle applies to time, phone numbers, email, and any other form of input the user needs to enter in the form.
When constructing a form, developers have to put in these so called “validation rules” that will determine how the data will look in the database to make it easier for them to manipulate the data according to their needs. Having data in a certain format helps maintain uniformity, correctness, meaningfulness, and also add a layer of security to the system.
Types of Validation
- Client-Side Validation: It’s fair to say that you
shouldn’t trust anybody, even when filling out simple online forms. Validating data on the client side will add an extra layer of protection to your data. This validation is mainly done using JavaScript using the web browser. This allows you to mold the data however you want before it’s sent over to the server. - Server-Side Validation: It’s always best practice to validate data on both the client- and server-side. Server-side validation provides another extra layer of security. After the data has been submitted, the server validates it using scripting languages such as ASP.Net, PHP, etc. By doing this, you’re making sure that you catch any errors that the client-side may have missed or if the user disabled Javascript on the browser, this validation will catch any anomalies.
Form and Editing
When giving the user the option to fill out forms, you have to be very clear on what kind of input you are requesting from them. If a specific field is required, make sure the user is aware by telling them and marking the field with an asterisk (*). If the user happens to make a mistake, make sure to let them know by highlighting the field with the error or displaying a pop-up window with the appropriate message (see below).
Some forms wait until the user has filled out all of the information and hits submit to validate the data, but I think that validation should happen right after the user clicks or tabs out of the field. This forces the user to provide the correct information and there is less confusion of where the error occurred.
Using inline editing forms can take this one step further and actually save/edit the data on a per-field basis instead of waiting to validate when the whole form is complete. This can be accomplished thanks to technologies like jQuery, Bootstrap and jQuery UI.
Following these simple guidelines should help make a clean-looking form on any site. It may seem a bit tedious, but these are the things that users remember most. The user’s experience on your site goes hand-in-hand with the customer service they receive when going to any brick and mortar store, so make sure to provide the best customer service possible.
What other best practices for form and field validation do you use? Share your wisdom with us in a comment below! Did you find this blog post useful? Make yourself at home and check out our blog home page to explore other technologies we use on a daily basis and the fixes we’ve solved in our day to day work. To make your life easier even easier, subscribe to our blog below to get instant updates sent straight to your inbox:
{{cta(‘33985992-7ced-4ebd-b7c8-4fcb88ae3da4′,’justifycenter’)}}
