Validating and Assisting
To solve the data entry problems, we can use Dijit validating text boxes. They either make changes to the input for you - like trimming and casifying - or alert the user of invalid input. We'll do this in a few steps.
Trimming and Changing Case
A few extra attributes for the TextBox dijit help the user along:
First Name:
<input type="text" size="20" name="first" dojoType="dijit.form.TextBox"
trim="true" propercase="true" />
Last Name:
<input type="text" size="20" name="last" dojoType="dijit.form.TextBox"
trim="true" propercase="true" />
Email Address:
<input type="text" size="20" name="email" dojoType="dijit.form.TextBox"
lowercase="true"/>
Setting trim="true" will make dijit.form.TextBox trim the spaces before and after the data value. When the TextBox loses the focus, dojo silently hacks the input and places it back in the box. Trimming is often essential in database work, where leading and trailing spaces often lead to search abnormalities down the road.
The propercase and lowercase attributes are similar. They make the input uppercase-first and lowercase, respectively, when the TextBox loses focus. The propercase attribute only changes lowercase letters - all existing uppercase letters are left alone. Similarly, lowercase changes only uppercase letters.
Currency Input
For valid number input, we employ dijit.form.CurrencyTextBox. This box does little things for you like adding the digit separators (comma and period in the US), and making sure only digits are typed.
maxlength="12"
class="fillwidth currency"
id="grossincome" name="grossincome"
value="0.00"
dojoType="dijit.form.CurrencyTextBox"
required="true"
onChange="updateTotals()"
currency="USD"/>
And because we haven't added a require for CurrencyTextBox, we add one to the top:
dojo.require("dijit.form.CurrencyText");
Adding Some Help
Googolican citizens complain that the form is too complex. John needs to add some directions, but it seems unfair to punish the intelligent citizens by cluttering up the form. So John decides to include some instructions, tucked away but in easy reach. The Dijit TitlePane is perfect for that.
title="Directions (click to Expand)" style="width:400px;height:300px">
Proin risus. Nullam rhoncus purus id turpis. Praesent aliquam adipiscing ligula. Aenean lorem ante,
accumsan quis, elementum id, cursus eu, lorem. Fusce viverra. Ut tempor nisi at ipsum. Etiam sed nibh.
</div>
Of course, the real text can be filled in later. Latin is not exactly a popular language in Googolica.
For some extra help, John inserts a Dijit Tooltip next to the gross income. Tooltip's can be tied to any DOM node - that is, any HTML tag - with an id attribute:
<div dojoType="dijit.Tooltip" style="display:none" connectId="helpIncome">
That's how much <b>money</b> you make.
</div>
The display:none style is not necessary, but it prevents the tooltip from flickering when the screen paints. Why does this happen? It's the way that Dijit handles pages:
- First all the HTML is drawn. The dojoType attributes are ignored, since they're not standard HTML.
- Once the page is drawn, the Dojo parser runs - that's what parseOnLoad does. The parser replaces all the dojoType'd tags with the widget HTML
- The widget then applies styles - including display attributes and colors - to make it look "right".
You can easily hide the 1st step screen-junk by applying display:none to those tags.
And lastly, don't forget the dojo.require's:
dojo.require("dijit.Tooltip"); dojo.require("dijit.TitlePane");
- Printer-friendly version
- Login or register to post comments
- Unsubscribe post
JS Required
To use "currency Input" & "Adding Some Help" you need to add to the JS import also:
I think that's not mentioned in the tutorial and a newbie dojo user could fault on this ;)
For local files users
The possibility to use America Online hosted scripts is cool but I think many people prefers to check their scripts locally. So please, could you make an example also with Dojo distribution files?
Looking at demos I used this code and it works but maybe there's a better way..
Also i noticed that the page works also without
Is it ok, i can avoid using it?
Comments on previous page
Comments on previous page (Adding Dijit) doesn'work, so i posted "For local files users" topic here..
Addressing Everything...
Yeah, we wondered if mentioning Locally Installed Dojo would confuse people. But enough folks have asked for instructions that it seems like a good idea to put it on Adding Dijit. So that's done. It's in slightly different form than your example. You include the _testCommon.js file, which is not needed for any production code. That file actually loads dojo.parser, so we still need the dojo.require("dojo.parser").
I also added the dojo.require's you mentioned. Thanks for the comments!
Trimming text in fields
With good design you shouldn't rely on the text that is being sent via an input box is already trimmed. Anyone with greasemonkey can alter the behaviour.
I think this suggestion is pointing people in the wrong direction.
Correction
Instead of the statement
dojo.require("dijit.form.CurrencyText");
dojo.require("dijit.form.CurrencyTextBox");
should be used...
demo
It would be useful if there were a final example on this page that shows the results of all of the changes.