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

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 .

Spawning many VirtualBox machines from a single VDI

What I'm taking about here is a way to have many VirtualBox machines based upon a single hard drive image. There are many reasons why you might like to do this, but the most compelling is probably saving time by not having to install an OS over and over again, especially useful if you do anything like software testing. Our goal is a single vdi (virtual disk) file which contains a vanilla installation of our favourite OS which we can then use to conjure up a fresh new machine in a jiffy. Assuming you already have VirtualBox installed our first step is (maybe for the last time ever!) to install our OS into a new virtual machine. Now I shan't go through this as it's pretty straight forward and if you're reading this it's the sort of thing you have probably done a hundred times before. One thing of note during the initial setup is the 'Virtual Hard Disk' configuration. Be sure to allocate enough space to allow for all potential applications of the image. It wou

Row a Concept2 on Zwift with a $10 Raspberry Pi!

Short story, I made a program. Instructions and download here:  https://github.com/mrverrall/go-row Despite there being an appetite for rowing in Zwift the fact is a rowing machine is not a bicycle and a Concept2 rower won't connect directly to Zwift. The Zwift gods tease a rowing release every now and again, but it's been coming 'soon' for years now. Don't hold your breath. But people do row in Zwift, so how do they do it? To get the data from the rowers computer, the PM5, into something Zwift recognises as a bicycle you need a device that translates between the rower and the device running Zwift. There are solutions already available to do this. Some are expensive like the  NPE CABLE (about £90 in the UK) and some are 'free' like the  RowedBiker  app. The downside with RowedBiker is that it needs to run on a extra device separate from the one running Zwift. If you have a compatible device lying around, great, otherwise you'll need to buy one. Meanwh