Client and Server Side Form Validation Pt. 3

So, with a nice looking form, and some decent JavaScript processing my form works very nicely. However, I need to make sure that the server receives good data even if the JavaScript was turned off or not in play. All that form niceness is to help the user, now it is time to help the server.

Currently, my thinking on this isn't very solid. I'm asking the server to do a lot of work to double check the form and then determining if it should pass on the information to be processed or if the form needs to be displayed again.

This is not too bad if the form is small and has a predetermined set of fields. However, many of these forms are dynamically generated, so the processing has to be dynamically processed as well. This is where I try to take advantage of frameworks and partials to keep my display code in modular chunks- breaking out the form from the rest of the page.

Basically, I try to cfparam all the form fields and then validate the results and report them with the form. So if JavaScript does its job on the original form, great. If not, it still is taken care of before it hits the server. Regardless of the amount of work the server or I have to do, it is probably for the best.

Client and Server Side Form Validation Pt. 2

So continuing from oh, so long ago. I have moved from the previous basic form and posting and blended in Bootstrap, jQuery.Validation and a lot of Googling/research.

Styling up a nice, easy to read and flow form with Bootstrap's form code is straight forward and pleasant. Even if radio button groups can be tricky.

Next, I needed to bring in some jQuery validation. Pretty much the go to is the jQuery Validation plug-in from bassistance.de. It seems to have the most work and there were many tutorials and references in the Bootstrap issues discussion about getting it to work.

My starting point to getting from Ben Nadel's basic form upgraded is this little code sample called jQuery Validate Demo from aLittleCode.com. This will punch up your forms nicely. But the forms I work with extensively use radio groups (evaluation ratings of 1-5, sometimes with N/A and some need to be required).

From here it takes a little fixing and JavaScript to include radio buttons to put the error message in a decent place. I got my notes from these two posts: Mihir Chitnis and this discussion (starting with the last half of kwilliams's post) on the Bootstrap issues.

I'd like to see Bootstrap fold in jQuery Validation to their JavaScript library or for a solid plug in to be developed. But with some tweaking I think I got a code base to work for my code set up.

Lets see if I can find some place to put code...


Form HTML
Form JavaScript

Client and Server Side Form Validation

Something that has bothered me for a while is how to combine Client and Server Side form validation as painlessly as possible (as a developer) while still maintaining a pleasant user experience. Its not just about being able to fall back when Javascript is not available, but having secure input to the database. I like to consider the Ajax-y/jQuery to be mostly in service of making data entry more efficient.

To that end here is my form design thoughts.

1. Writing clear and concise labels and instructions (too many instructions means that my form has business logic problems)
2. Scripting input events to alert the operator to problems as they enter data and as they submit
3. Checking and sanitizing the data on the server before making changes to the database
• If the form is deemed valid, proceed to processing
• If there are problems, re-post the form and repopulate the data with error messages

From the reading I've done, there will always be some amount of duplication of code. This is the nature of web applications. This can be mitigated by having reusable code, both as JavaScript libraries and having modular server side code. How to do this will be the subject of this experiment.

My starting point is the article by Ben Nadel from December 2011 called How Client-Side Validation Is Changing The Shape Of Server-Side Validation. Part of the issues will be integrating the code into our style of FuseBox, finding a decent jQuery plug-in, I may have to buckle down and figure out how CFCs really work, figure out how to use Ajax and standard posts with the same code (probably related to CFCs) and lastly how to deal with dynamically generated forms.

Tall order. I should have done this years ago.