Problem 1: making fields required.

This is a simple problem at the top of a more complex issue. In standard HTML there is no such thing as a ‘flag’ value which can be added to fields in a form indicating whether they are required or not, but there are two methods available to go around the problem: server side and client side solutions.

In the old days you had two options: the form was submitted to the server. Then a cgi script validated the data and returned it to the browser with cryptic error messages like ‘something is missing’.

The alternative was to submit the page to itself (pseudo- client side): some javascript was handling the processing of the form and allowed to highlight the missing fields before you could submit it. This is certainly an improvement in the user interface and a quite solid and reliable one, but there was no way for the user to notice whether something was incorrectly entered until the form was submitted.

Neither of the above is possible in the case of Batchbook forms as I obviously don’t have access to the server-side script which handles the forms, nor I wanted to have custom-made function to validate the forms as it is too cumbersome to maintain!

In the meantime user interface developers have been crunching numbers in the background in the past few years and wonderful libraries and APIs have been developed making the magic happen on the client side in very clever ways: jquery and mooTools are probably the most well-known libraries.
Even if you don’t fully understand how they work (and I’m one of who is only tinkering with the libraries and plugins!), it is not too difficult to adapt things to fit the purpose of what is needed.

That is exactly what I have done: I borrowed a plugin for jquery and modified the code of the form to ‘validate’ on the client side. The key adavantage of using a library is that a lot more becomes available on the client side and unlike the early days of javascript in which people were concerned that the browsers were not able to handle it, these days it seems that only 1% of users actively deactivate javascript.

The choice for me was jquery (this is already available in wordpress), with the jquery.ui library and an inline validation engine plugin developed by Cedric Dugas. The latter is doing all the hard work!

The first thing was to figure out which fields were deemed ‘required’. In my case the name, lastname and email were the core fields to start with.
After including the libraries and the css in the head of the document:


I then customised a little the validation function:

		$(document).ready(function() {
			//$.validationEngine.buildPrompt("#date","This is an example","error")	 		 // Exterior prompt build example
			//$.validationEngine.closePrompt(".formError",true) 							// CLOSE ALL OPEN PROMPTS
		function validate2fields(){
			if($("#contact_details[first_name]").val() =="" ||  $("#contact_details[last_name]").val() == ""){
				return false;
				return true;

The final touch was to add the class to trigger the verification of the fields when the user moves on to the next field. The immediate popup alerts the user immediately saving them the submit and recheck type of interaction we have talked about earlier. In my example this is what I have done:

Repeat the same with the other fields as required (check the instructions on Cedric’s website for more details) including checkboxes:

Student Teacher/Staff

And that’s all folks! You can look at the other installment of this batchbook forms tutorial:
big dropdown menus & custom dates
hidden fields
help tooltips

And as usual leave comments/notes if it was useful!

Be Sociable, Share!
Batchbook forms – required fields
Tagged on:             

Leave a Reply