The Sitch (As in ‘Situation’)
In my case, we’ve got a third party collecting all of our form data and then running it through their system so the entire company can act on it later. It’s great for certain departments but pure hell for anyone who’s unlucky enough to have to develop for the system.
Here’s what happens:
User fills out a form and hits Submit. Form data is posted…
Form posts data to one of a possible four form processing scripts we host on various servers. And do you know what they do with that data? Send it back out as a POST array using cURL. Okay, well, to this intermediate form’s credit, it does do some basic validation before POSTing that data back out to it’s final destination. But do you know what it does if the data doesn’t pass validation? It chokes and spits up a very plain, ugly page on a totally different URL than the user was on with a message saying “The field X is required. Press the back button”. What the fucking fuck?!?! Press the back button? They’re on a totally different URL now, mind you (not that many computer illiterate people know the difference anyway) and we ask them to press back. Okay, fine. So they press back. But what if they had more than one error on a form? Tough shit! The first validation script will only show you one error at a time. So when you press back and correct your first mistake you’d better hope to god that there aren’t any other errors or you’ll be pressing the back button some more. But I digress… that’s how just retarded our forms are right now.
That retarded form I mentioned in step two sends the data is got back out as a POST request using cURL.
The problem is that the user gets very little feedback about their ability to fill out the form. They don’t know when they’ve made mistakes until after the submit and even then the errors are vague and shitty from a UX perspective. Beyond that it sometimes takes up to 5 seconds for the process to complete (remember, we’re posting to script 1 which then posts to script 2 – over cURL and depending on serverload and the 3rd party processor’s response that can take a lot of time. That’s like at least 3 separate connections that need to be made for a single form submission). With that kind of wait time we often get people clicking the form a trillion times.
We needed a solution. Well, I know how to solve the problem once and for all and for good but they don’t let me have that kind of power so I have to work around a set of constraints. Which leads me to how to do form validation client-side without the bullshit.
Doing the Validation
So since our current validation process sucks, I’m implementing client-side validation which I know is something you should never truly rely on but it’s all I’m allowed to do. So the goal here is to give the user as much feedback as possible before they press submit and to let them know after they submit that the data is being processed and to be patient.
Step 1: Get a no-bullshit JS library
Grab a copy of Parsley.js. It’s awesome. It’s no bullshit.
Stick it in your pipe and smoke it. Or, rather, stick it at the bottom (or top if you’re old school) of your HTML. Reference it somehwere along with jQuery like this:
Then create a form and use pure HTML5 for validation:
1 2 3 4 5 6 7 8 9
Now Parsley just takes care of the rest. Seriously. Just try to submit that form without filling it in! Here, have a look at this demo embedded below for your convenience:
Now, of course we really should be doing validation server side and giving our users far better feedback when the server detects a problem but hey, sometimes when you work for a company of a certain size no one wants to listen to the guy who knows what he’s talking about so this solution will just have to do.
Check out Parsley.js. It’s seriously the easiest (client-side) form validation library I’ve ever used!