So, that works, but is a bit ugly. Let\'s get rid of the alert. It smells of 1997. How about inserting some text into the page instead? I added a new div, and relevant style, to my page:

...

The div is empty for now which means the user won\'t see it until I actually put something in it. Now instead of creating an alert, I\'m going to just inject HTML into the div. I modified my error messages to use BR tags. (In case it wasn\'t clear, the alert uses line breaks, \n, to create the breaks.)

if(username == \'\') errors += \'Please specify a username.
\'; if(password == \'\') errors += \'Please specify a password.
\';

And to inject it, I modify the div\'s innerHTML property:

var errorDiv = document.getElementById("errorDiv"); if(errors != \'\') { errorDiv.innerHTML=errors; e.preventDefault(); } else errorDiv.innerHTML=\'\';

So - what\'s up with the else there? When the user hits the form, it\'s possible that they will make some type of mistake. When they do, a message is added into the div. When they correct the mistake and hit submit, the form submission will go along as normal. But if the form processor is slow, then the user will continue to see the error message. By clearing it, we remove any doubt in the user\'s mind that their form is being processed.

You can demo this here: http://www.raymondcamden.com/demos/2012/jan/27/test3.html The full code is below:

Alrighty... now that we\'ve got the basics down, it\'s time to kick it up a notch. Let\'s begin by looking at a slightly more complex form:

We\'ve now got a text field, a textarea, a select box, a set of checkboxes, and a radio group. The code we used earlier to grab form values will need to be updated a bit. So for example, we can\'t just get the value of a set of checkboxes.

In order to simplify things a bit, we\'re going to upgrade our code a bit to something more modern - the Selectors API. Roughly, this gives us jQuery-style APIs to the DOm and simplifies things for us quite a bit, especially in terms of our radio/checkbox groups. The API comes down to two main method: querySelector and querySelectorAll. I recommend this blog entry for a good introduction: HTML5 selectors API -- It\'s like a Swiss Army Knife for the DOM. This is - yet again - one more cool aspect of HTML5 that seems to be passed over for demos of Canvas apps and kittens. Sigh. That being said, the support for this is actually rather good. When we talk about support and HTML features, typically the bugaboo is IE. In this case, IE8 and above supports the feature. Good enough for me. Let\'s look at one change:

var myform = document.getElementById("myform");

versus:

var myform = document.querySelector("#myform");

Not too terribly different, right? And if you are used to jQuery then this is familiar. You aren\'t saving a lot of keystrokes here, but wait, it gets better. Let\'s take a look at how we grab some of these form fields:

var name = document.querySelector("#name").value; var bio = document.querySelector("#bio").value;

Ok - not too different. Basically we just get to the DOM via the newer API versus the older one. How about the select? Well, select fields have a selectedIndex. Our business rule will be to simply ensure the first item isn\'t picked, so all we care about is the index.

var gender = document.querySelector("#gender").selectedIndex;

Ok, now it\'s time to get fancy. How do we ensure our users pick at least one from the checkbox group? We could use document.getElementById for all four fields and ensure at least one has their checked property set to true. That\'s not horrible per se, but it\'s a lot of typing I would hope we can skip. Our radio group has same validation rule. How can we do this nice and easy?

var colorcbs = document.querySelectorAll("input[name=\'favcolor\']:checked"); var foodcbs = document.querySelectorAll("input[name=\'favfood\']:checked");

Let\'s look at the first one since the second example is the same ignoring the name. Our selector is: input[name=\'favcolor\']:checked. Reading left to right we have: Give me input fields that have an attribute name with the value favcolor, and filter to those that are checked. Or in English - what did I check in the favcolor group? These two calls both return an array of DOM items for any checked field. What\'s cool is that I can then just check the length of this array. This would also let me support things like, "Pick at least one favorite food but no more than three." Let\'s take a look now at the validation code:

if(name == \'\') errors += \'Enter a name.
\'; //bio not required if(gender == 0) errors += \'Select a gender.
\' if(colorcbs.length == 0) errors += \'Select a favorite color.
\'; if(foodcbs.length == 0) errors += \'Select a favorite food.
\';

Not too difficult, right? You can view the full demo here: http://www.raymondcamden.com/demos/2012/jan/27/test4.html

And here is the complete template:

So... what do you think? If you\'ve never worked with JavaScript, or are just beginning, does this make sense? Any question?

p.s. So I mentioned above that one of the things you have to watch our for is errors in your submit handler. One way to work around that - at least in Chrome - is to enable Console/Preserve log upon navigation. This will keep the error in your log even after the form goes to the submit page.