Take Your Web Forms to the Next Level with Dojo | 2 | WebReference

Take Your Web Forms to the Next Level with Dojo | 2


[prev]

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.

Figure 1: Digit Form with Firebug Lite

Figure 2 shows what you should see.

Figure 2: Digit Form

Form Validation

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 dojoType from dijit.form.TextBox to dijit.form.ValidationTextBox:

Don't forget to change the import as well:

Because 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.

The 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 validates the 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 max constraint on 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


[prev]