Transform Your Javascript Form Validation

When you design and build a website, there’s a lot of work to be done. You find yourself doing tasks you don’t really want to do. For many designers that includes Javascript. The pain of Javascript can be mitigated when using jquery and its used to increase the UX of the website. The real pain comes though, when working with forms, particularly form validation. Lucky for you, I’m gonna give you a new way to think about validation. It’ll make your life as the web designer much easier.

Old School Validation

As the web designer, it’s your job to craft the front end. Part of that is to make sure the data in your forms is valid. So you search the web for some examples of javascript that can be used to validate your form data. You may be looking for a way to validate your data consists only of numbers, a valid email, a US Zip code, a phone number or a URL. So in keeping with the great Internet tradition of “make it work”, you write some code to implement what you’ve found. After a couple hours, you get it working in your browser. Then you spend the next couple of hours testing it out on other browsers, and trying different data that you expect. If all goes well, you put it out on the web for your customers to use.

If you’re working on a team, you may have a PHP developer. She’ll write the code that captures the data, validates it, and stores it in the database. She may have done a similar process to what you just did. She may be using a code library that has done the heavy lifting for her. Here’s to hoping – Cheers! Her test data sufficiently passed the tests she thought up, and committed to subversion for the next website update.

If you’re working alone, you may have left that process for later, when you have more time. Besides, everyone has javascript. Validating before submitting is good enough, right?

What Could Go Wrong?

What’s wrong with the scenarios above? There’s a couple of things, actually.

In the event that you decide to use only javascript and postpone server-side validation for later, it’s easy to circumvent. The user can shut off javascript in their browser or, it could be blocked by a proxy or firewall. In any case, it leaves a gap in functionality. While it may not seem like a big deal, bad data is never fun to deal with.

Instead of trying to duplicate the server’s validation logic on the client, use AJAX upon submitting the form.

If you have a PHP programmer on your team, you need to have good communication with her. Without it, each of you will arrive at different ideas of what is valid. This will provide a terrible UX, and lead to a frustrated customer, particularly if the server-side is more strict. If you do communicate well, and your code works identically, you still have the problem of synchronization. When something changes on the server, that same change needs to be made in your javascript. This violates the DRY Principle. So, what can be done? Let me show you a better way.

A Better Way

The solution is one of mindset. Progressive Enhancement is your friend. By doing the following you’ll create a better user experience, and save yourself a lot of time and frustration.

Start with HTML. When you layout your form, consider which fields are required. For each field that’s required, create the appropriate markup and css for an error message. Then talk with your PHP developer about your required fields and your expectations about how they should be validated. It’s up to her to create a function that examines all the inputs on the server. She’ll use that function to return an array of errors. It’s important that the validation logic to be in a separate function. She’ll repopulate the form with the pertinent error messages next to each field. The styles used will be what you designed earlier.

But wait! What about the Javascript validation? Ah, glad you asked. Well, it couldn’t be easier. Since you have validation working on the server, now we can make a better experience for those that have Javascript available. Instead of trying to duplicate the server’s validation logic on the client, use AJAX upon submitting the form. This way, you can prevent the submission of the form, if something is invalid. Not only will this reduce your workload, but it also simplifies your code. What’s awesome about this is that no matter where the request comes from, the answers will always be the same.

To see how this works, check out the add form on Cafe Workr to see it implemented in a live environment. In the near future, I’ll write a tutorial on the how to build this.

Comments are closed.

Post Navigation