Login Register

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:

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

<input type="text"
                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.

<div dojoType="dijit.TitlePane" open="false"
     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:

<img src="symbol_help.gif" id="helpIncome"/>
<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:

  1. First all the HTML is drawn. The dojoType attributes are ignored, since they're not standard HTML.
  2. 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
  3. 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");

JS Required

To use "currency Input" & "Adding Some Help" you need to add to the JS import also:

dojo.require("dijit.TitlePane");
dojo.require("dijit.form.CurrencyTextBox");

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

Taxes, The Surest Thing Next to Death!

	
		@import "js/dojo/resources/dojo.css";
		@import "js/dijit/tests/css/dijitTests.css";
	
	
	

    

    dojo.require("dijit.form.DateTextBox");
    dojo.require("dijit.form.TextBox");
    dojo.require("dijit.form.ComboBox");
		dojo.require("dijit.form.CheckBox");
		
		dojo.require("dijit.TitlePane");
    dojo.require("dijit.form.CurrencyTextBox");
    
        

Also i noticed that the page works also without

       dojo.require("dojo.parser");

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.