Skip to main content

An Exercise in Form Validation using JavaScript Prototyping

Form validation is an important part of most websites and more specifically client side validation is an important contribution to the the user experience.

In the brave new world of "Web 2.0" we have access to tools like JQuery to help developers to do this sort of jazz with AJAX and the like. This however (regardless of how straight forward it actually is) is still scary and complicated for anyone not already familiar with JavaScript.

The code I want to talk about here is of my own creation. I'll be the first to admit that "I am not a developer", and so the code itself may not be technically perfect, for this I make little apologies.

What I set out to do is create a reusable code class; a class which can be reused to validate any form without modification or an excess of additional javascript. I also took the opportunity to tinker with 'prototyping' to take a true object orientated approach to the code; this makes it fast and hopefully easy to follow.

In reality the minimum code requirements for any page containing a form would look a little bit like this:
<script type="text/javascript">

var myValidator = new ValidatorClass();

function submitForm() {
 myValidator.checkForm();
}
</script>

Take notice of the lack of any reference to HTML object names or ids, the code is entirely generic, all we are doing is instantiating the class.

The types of validation for form elements themselves are set within the form elements tag with the simple addition of some attributes such as
validate, valmand, valmin, valmax etc.

Any number of compatible commands can be used in combination, e.g. a text field which is mandatory and has a minimum and maximum character length could be defined as such:
<input type=text validate valmin=5 valmax=15>

The consequence of this should be obvious but do note the lack of any scripting or complex syntax.

I've prepared a demonstration form displaying some of the key features. The javascript itself is also available for download, and contains more extensive details on the classes use.

Feel free to play.

Comments

Popular posts from this blog

Raspberry Pi A2DP Bluetooth Audio Receiver

I wanted to use a Raspberry Pi to act as a Bluetooth audio receiver or my Hi-Fi so that I could connect a phone/tablet easily to some proper speakers wirelessly. Rather than reinventing the wheel 'kmonkey' has already achieved most of what I set out to do over here; check this out first.

The only issue now is the manual intervention needed to connect up a new Bluetooth source to the output sink. I initially created a simple bash script to poll pulseaudio (every 5 seconds) and run the necessary commands as and when a new device is connected. You can see the script here and all the pertinent commands are explained over in kmonkey's blog. This is all good, but will need to be run manually using something like,

# nohup ./bt_audio_attach &

This is a bit rubbish and you'll be pleased to know there is a better way to get this done, UDEV!

Over at the Raspbery Pi forums  there's some discussion on using UDEV scripts to automate this process entirely. Initially I had…

Blocking Adverts from the Roku Menu

UPDATE: 18 May 2013 - A new firmware (v5) has changed the way ads are handled on the Roku such that this guide is no longer relevant. 

Roku are are a pretty neat little media streaming box but one thing that I think lets them down are the trashy and mostly irrelevant adverts on the home page. Wouldn't it be great if you could get rid of these?

The ads are served by the third party ad platform, ZEDO. You can block the ads from displaying by simply blocking this domain entirely or by being more targeted and blocking the specific sub-domain serving the Roku ads. A TCPDUMP of my Roku shows that the ad images currently come from 'd7.zedo.com' (although this may change).

I block them by adding a custom DNS record for this sub-domain to my home router pointing to the loopback address (127.0.0.1). There are or course many other ways you could do this, but the best way will largely depend on your own set-up and resources.

Moodle on Centos or Red Hat 7 (with SELinux!)

Why the need for another 'Installing Moodle' guide? Two reasons, Systemd and SELinux.
The steps are presented as a Bash script, which may be run on a virgin system, installing a complete working Moodle stack in one go, including enforcing SELinux.

In addition to the absolute basics it also includes adding ClamAV virus for file uploads and Memcached for sessions and 'MUC'.

It does not cover any extras you will need to get your site up to production, e.g. securing your database or updating your virus definitions automatically. Neither does it do any extra PHP configuration (upload limits, execution time etc.) or any extra complexities that might be desirable. For all of this you should goto docs.moodle.org.