Take Your Web Forms to the Next Level with Dojo [con't]
A couple of attributes are all that separate a Dijit control from a regular
HTML element, and that's intentional. It makes it quite easy to add extra functionality
to existing forms. The most important attribute is the
dojoType. It's what tells
the parser what type of control that tag refers to. There are also some optional
attributes, such as the
placeholder. It displays hint text inside textbox controls
that disappears as soon as they receive the focus. Here is the form HTML without
formatting (assume that it would be in a CSS file):
When the page is displayed in a Web browser, errors (if there are any) are displayed in the Firebug or Firebug Lite console as shown in Figure 1.
As with any input forms, there are certain criteria that the element values
must meet before the form contents can be submitted to the server. The usual
approach is to add code to the form's
onsubmit() event and return the results
of a validation function. Using Dojo's Dijit controls, you can also validate
each control when it loses the focus. For instance, to make the
Name field mandatory,
we have to change the
Don't forget to change the import as well:
required="true" has been added to the widget, an error icon and tooltip
(with error message) will display if the user fails to place text into the box.
A custom error message can be placed within the
missingMessage attribute, otherwise
a generic message will display.
dojox.validate library includes numerous utility functions and regular
expressions for validating form element values. These utility functions can
validate email addresses, URLs, phone numbers, ZIP codes, and much more. To
use them, all you need to do is import a couple of libraries:
Here's the code to validate the email:
For custom pattern validation, use the
regExp attribute. Here is code that
website element contents:
To perform additional validation on the form submit action, insert a script like the following at the top of the form:
Here's a demo of our form for you to try out.
Your assignment is to verify that the date of birth is a valid past date. I'll
give you a hint to get you started. The solution involves setting the
dijit.form.DateTextBox control. Good luck!
Have a suggestion for an article topic? Do you have a product or service that you'd like reviewed? Email it to Rob .
Rob Gravelle combined his love of programming and music to become a software guru and accomplished guitar player. He created systems that are used by Canada Border Services, CSIS and other Intelligence-related organizations. As a software consultant, Rob has developed Web applications for many businesses and recently created a MooTools version of PHPFreechat for ViziMetrics. Musically, Rob recently embarked on a solo music career, after playing with Ivory Knight since 2000. That band was rated as one Canada's top bands by Brave Words magazine (issue #92) and released two CDs. Rob's latest release is called "The Rabbit of Seville". Loosely based on Rossini's The Barber of Seville overture, Rob's amazing rendition includes a full orchestra and numerous guitar tracks. It is sold on his site as a high bitrate MP3 for only $0.99 cents! Rob is available for short-term software projects and recording session work. to inquire, but note that, due to the volume of emails received, he cannot respond to every email. Potential jobs and praise receive highest priority!
Original: October 8, 2010