JungleDragon registration form »
FERDY CHRISTANT - NOV 23, 2008 (10:45:02 AM)
Ever since I started development on project JungleDragon, I've been mostly working on the backend of the system: the database, its model classes, and the controller logic. As for the presentation of things, I've sticked to some raw, unstyled HTML display: First make it work, then make it beautiful.
Let's take user registration as an example. Storage is covered. I have a users table and a model class that allows me to create, read, update and delete users. Check. Next is the controller logic, which validates the registration data, manage the page flow and interact with the model (for example to send out an activation email). That is mostly done too. Finally we have the presentation layer.
The presentation layer consists of three layers actually. There is markup, there is style, and there is behavior. I want to focus on behavior now. For years I've been applying the common practice of interweaving behavior with markup, as most of us do:
<form name="frmRegistration onsubmit="validate(this)">
<input type="button" name="checkuser" value="Check user" onclick="checkUser" />
After reading with fascination about jQuery for months, I finally took the plunge and applied it to a form: the JungleDragon registration form. I now regret not doing this earlier, because it is true what they say. jQuery allows you to completely seperate the front-end behavior from its display (markup):
<form name="frmRegistration">
<input type="button" name="checkuser" value="Check user" />
I will even go as far as to say that jQuery is a major breakthrough in web development, as big as the arrival of CSS years ago. Anyway, enough about that. What I wanted to do is implement jQuery-based input validation to the user registration form, in order to see how and if it will affect my backend implementation. Behold the form:
As mentioned, the markup is still not styled. I first wanted to make it work. Do not be fooled by the simplicity of this form though, there is quite a lot going on:
- It features real-time validation, the user gets feedback as he types.
- There is a wealth of validation logic going on: checking required fields, input formatting, minimum/maximum length validation, field matching (for the email and password), and remote checks (JSON-based) to see if the username and password do not exist yet.
- The above form and all its validation rules also work when Javascript is disabled. The user will pass by back-end validation no matter what.
- All values entered are preserved in case the user breaks the validation.
- A nice little gimmick: I've implemented a completely custom CAPTCHA check where the user sees a random picture and has to identify what it is.
