Easy Dynamics Blog

Form and Field Validation Best Practices

Posted by Martin Ramos on Jan 27, 2016 10:00:00 AM

Find me on:

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.

form construction and data validation graphic by Martin Ramos at Easy Dynamics

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

  1. Client-Side Validation: It’s fair to say that you client vs server side validation graphic Martin Ramos at Easy Dynamicsshouldn’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.  
  2. 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.

highlighted error field in form validation process graphic by Martin Ramos at Easy Dynamics

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. 

inline editing on form for field validation graphic by Martin Ramos at Easy Dynamics


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:

Subscribe to Blog at Easy Dynamics for Fixes and How-To's

Topics: Best Practices, JavaScript, Field Validation, Form Validation, UI

Easy Dynamics: The SharePoint Experts

We are a leading SharePoint Services and Solutions shop located in Washington, DC. 

Thanks for coming to our blog! Here you will find relevant news and information about the technologies we use and other things we find interesting. Want to know more about who we work with? Or our first commercially available product, EasyBox

You can find links to all of these things and more right from this page. Enjoy reading!

Recent Posts

Subscribe to Email Updates