1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Test TextBox Validation Widgets</title>
7 <style type="text/css">
8 @import "../../../dojo/resources/dojo.css";
9 @import "../css/dijitTests.css";
12 background-color:#fbfbfb;
15 border:1px solid #bfbfbf;
37 .dojoTitlePaneLabel label {
42 <script type="text/javascript" src="../../../dojo/dojo.js"
43 djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
44 <script type="text/javascript" src="../_testCommon.js"></script>
46 <script type="text/javascript">
47 dojo.require("dijit.form.TextBox");
48 dojo.require("dijit.form.ValidationTextBox");
49 dojo.require("dijit.form.NumberTextBox");
50 dojo.require("dijit.form.CurrencyTextBox");
51 dojo.require("dojo.currency");
52 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
57 <h1 class="testTitle">Dijit Validation Widgets</h1>
58 <!-- to test form submission, you'll need to create an action handler similar to
59 http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
60 <form id="form1" action="" name="example" method="">
62 <div class="dojoTitlePaneLabel">
63 <label for="q01">First Name: </label>
64 <span class="noticeMessage"> TextBox class, <b>tabIndex=2</b>, Attributes: {trim: true, propercase: true, style: 'width:700px'}, First letter of each word is upper case.</span>
66 <div class="testExample">
67 <input id="q01" type="text" name="firstname" value="testing testing" style="width: 700px;" tabIndex=2
68 dojoType="dijit.form.TextBox"
70 onfocus="console.log('user onfocus handler')"
71 onblur="console.log('user onblur handler')"
72 onChange="dojo.byId('oc1').value=arguments[0]"
74 <br>onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
77 <div class="dojoTitlePaneLabel">
78 <label for="q02">Last Name: </label>
79 <span class="noticeMessage"> TextBox class, Attributes: {trim: true, uppercase: true, class: 'verylong'}, all letters converted to upper case. </span>
81 <div class="testExample">
82 <input id="q02" type="text" name="lastname" value="testing testing" class="verylong"
83 dojoType="dijit.form.TextBox"
88 <div class="dojoTitlePaneLabel">
89 <label for="q03">Age: </label>
90 <span class="noticeMessage"> NumberTextBox class, <b>tabIndex=1</b>, Attributes: {trim: true}, no initial value specified, tooltipPosition=[above, below]</span>
92 <div class="testExample">
93 <input id="q03" type="text" name="age" tabIndex=1
94 dojoType="dijit.form.NumberTextBox"
95 promptMessage="(optional) Enter an age between 0 and 120"
98 constraints="{places:0,min:0,max:120}"
99 onChange="console.debug('onChange fired for widget id = ' + this.id + ' with value = ' + arguments[0]);"
100 tooltipPosition="above, below"
104 <div class="dojoTitlePaneLabel">
105 <label for="q04">Occupation: </label>
106 <span class="noticeMessage">ValidationTextBox class,
107 Attributes: {lowercase: true, required: true, class: verylong, style: font-size: 15pt;}. Displays a prompt message if field is missing.</span>
109 <div class="testExample">
110 <input id="q04" type="text" name="occupation" class="verylong" style="font-size:15pt;"
111 dojoType="dijit.form.ValidationTextBox"
114 promptMessage="Enter an occupation" />
117 <div class="dojoTitlePaneLabel">
118 <label for="q05">Elevation: </label>
119 <span class="noticeMessage">IntegerTextBox class,
120 Attributes: {required: true, min:-20000, max:+20000 }, Enter feet above sea level with a sign.</span>
122 <div class="testExample">
123 <input id="q05" class="small"/>
124 onChange:<input id="oc5" size="10" disabled value="not fired yet!" autocomplete="off">
127 // See if we can make a widget in script and attach it to the DOM ourselves.
128 dojo.addOnLoad(function(){
132 constraints: {min:-20000,max:20000,places:0},
133 promptMessage: "Enter a value between -20000 and +20000",
135 invalidMessage: "Invalid elevation.",
136 onChange: function(){dojo.byId('oc5').value=arguments[0]},
139 var w = new dijit.form.NumberTextBox(props, "q05");
143 <div class="dojoTitlePaneLabel">
144 <label for="attach-here">Population: </label>
145 <span class="noticeMessage">IntegerTextBox class,
146 Attributes: {trim: true, required: true, signed: false, separator: ","}. <br><b> This widget was added in script, not markup. </b> </span>
148 <div class="testExample" >
149 <input id="attach-here" type="text" name="population" class="medium" value="1500000"/>
153 // See if we can make a widget in script and attach it to the DOM ourselves.
154 dojo.addOnLoad(function(){
160 regExpGen: dojo.regexp.integer,
161 constraints: {signed:false, separator: ","},
162 invalidMessage: "Invalid population. Be sure to use commas."
164 var w = new dijit.form.ValidationTextBox(props, "attach-here");
168 <div class="dojoTitlePaneLabel">
169 <label for="q06">Real Number: </label>
170 <span class="noticeMessage">RealNumberTextBox class,
171 Attributes: {trim: true, required: true}. Enter any sort of real number.</span>
173 <div class="testExample">
174 <input id="q06" type="text" name="real1" class="medium" value="+0.1234"
175 dojoType="dijit.form.ValidationTextBox"
176 regExpGen="dojo.regexp.realNumber"
179 invalidMessage="This is not a valid real number." />
181 <div class="dojoTitlePaneLabel">
182 <label for="q07">Exponential Notation: </label>
183 <span class="noticeMessage">RealNumberTextBox class,
184 Attributes: {exponent: true}. Enter a real number in exponential notation.</span>
186 <div class="testExample">
187 <input id="q07" type="text" name="real2" class="medium" value="+0.12"
188 dojoType="dijit.form.ValidationTextBox"
189 regExpGen="dojo.regexp.realNumber"
192 constraints={exponent:true}
193 invalidMessage="Number must be in exponential notation. Example +5E-28" />
197 <div class="dojoTitlePaneLabel">
198 <label for="q08">Annual Income: </label>
199 <span class="noticeMessage">CurrencyTextBox class,
200 Attributes: {fractional: true}. Enter whole and cents. Currency symbol is optional.</span>
203 <div class="testExample">
204 <input id="q08" type="text" name="income1" class="medium" value="54775.53"
205 dojoType="dijit.form.CurrencyTextBox"
207 constraints="{fractional:true}"
209 onChange="dojo.byId('oc8').value=arguments[0]"
210 invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Cents are mandatory." />USD
211 onChange:<input id="oc8" size="15" disabled value="not fired yet!" autocomplete="off">
214 <div class="testExample">
215 euro currency (local format) fractional part is optional:
216 <input id="q08eur" type="text" name="income2"
217 class="medium" value="54775.53"
218 dojoType="dijit.form.CurrencyTextBox"
221 invalidMessage="Invalid amount. Include dollar sign, commas, and cents." />EUR
222 <button onclick="dijit.byId('q08eur').setAttribute('disabled',true);return false">Disable</button>
223 <button onclick="dijit.byId('q08eur').setAttribute('disabled',false);return false">Enable</button>
224 <button onclick="dijit.byId('q08eur').reset();return false">Reset</button>
228 It is unusual to override the lang properties on individual
229 widgets. Usually it should be the user's default or set on
230 a page basis by the server. This is for testing purposes
232 <div class="testExample">
233 euro currency (fixed lang: de-de) programmatically created, fractional part is optional: <input id="q08eurde" class="medium"/>EUR
237 // See if we can make a widget in script and attach it
238 // to the DOM ourselves.
239 dojo.addOnLoad(function(){
240 var example = dojo.currency.format(54775.53, {locale: 'de-de', currency: "EUR"});
247 invalidMessage: "Invalid amount. Example: " + example
249 var w = new dijit.form.CurrencyTextBox(props, "q08eurde");
254 <div class="dojoTitlePaneLabel">
255 <label for="q08a">Annual Income: </label>
256 <span class="noticeMessage">Old regexp currency textbox,
257 Attributes: {fractional: true}. Enter dollars and cents.</span>
259 <div class="testExample">
260 <input id="q08a" type="text" name="income3" class="medium" value="$54,775.53"
261 dojoType="dijit.form.ValidationTextBox"
262 regExpGen="dojo.regexp.currency"
265 constraints={fractional:true}
266 invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" />
269 <div class="dojoTitlePaneLabel">
270 <label for="q09">IPv4 Address: </label>
271 <span class="noticeMessage">IpAddressTextBox class,
272 Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span>
274 <div class="testExample">
275 <input id="q09" type="text" name="ipv4" class="medium" value="24.17.155.40"
276 dojoType="dijit.form.ValidationTextBox"
277 regExpGen="dojo.regexp.ipAddress"
280 constraints={allowIPv6:false,allowHybrid:false}
281 invalidMessage="Invalid IPv4 address.">
284 <div class="dojoTitlePaneLabel">
285 <label for="q10"> IPv6 Address: </label>
286 <span class="noticeMessage">IpAddressTextBox class,
287 Attributes: {allowDottedDecimal: false, allowDottedHex: false}.
288 Also hybrid works, x:x:x:x:x:x:d.d.d.d</span>
290 <div class="testExample">
291 <input id="q10" type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000"
292 dojoType="dijit.form.ValidationTextBox"
293 regExpGen="dojo.regexp.ipAddress"
297 constraints={allowDottedDecimal:false, allowDottedHex:false, allowDottedOctal:false}
298 invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x">
301 <div class="dojoTitlePaneLabel">
302 <label for="q11"> URL: </label>
303 <span class="noticeMessage">UrlTextBox class,
304 Attributes: {required: true, trim: true, scheme: true}. </span>
307 <div class="testExample">
308 <input id="q11" type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3"
309 dojoType="dijit.form.ValidationTextBox"
310 regExpGen="dojo.regexp.url"
313 constraints={scheme:true}
314 invalidMessage="Invalid URL. Be sure to include the scheme, http://..." />
317 <div class="dojoTitlePaneLabel">
318 <label for="q12"> Email Address </label>
319 <span class="noticeMessage">EmailTextBox class,
320 Attributes: {required: true, trim: true}. </span>
323 <div class="testExample">
324 <input id="q12" type="text" name="email" class="long" value="fred&barney@stonehenge.com"
325 dojoType="dijit.form.ValidationTextBox"
326 regExpGen="dojo.regexp.emailAddress"
329 invalidMessage="Invalid Email Address." />
332 <div class="dojoTitlePaneLabel">
333 <label for="q13"> Email Address List </label>
334 <span class="noticeMessage">EmailListTextBox class,
335 Attributes: {required: true, trim: true}. </span>
338 <div class="testExample">
339 <input id="q13" type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; "
340 dojoType="dijit.form.ValidationTextBox"
341 regExpGen="dojo.regexp.emailAddressList"
344 invalidMessage="Invalid Email Address List." />
347 <div class="dojoTitlePaneLabel">
348 <label for="q22">Regular Expression </label>
349 <span class="noticeMessage">RegexpTextBox class,
350 Attributes: {required: true} </span>
352 <div class="testExample">
353 <input id="q22" type="text" name="phone" class="medium" value="someTestString"
354 dojoType="dijit.form.ValidationTextBox"
357 invalidMessage="Invalid Non-Space Text.">
360 <div class="dojoTitlePaneLabel">
361 <label for="q23"> Password </label>
362 <span class="noticeMessage">(just a test that type attribute is obeyed) </span>
364 <div class="testExample">
365 <input id="q23" type="password" name="password" class="medium"
366 dojoType="dijit.form.TextBox">
369 <div class="dojoTitlePaneLabel">
370 <label for="ticket1651">Trac ticket 1651: </label>
371 <span class="noticeMessage">value: null should show up as empty</span>
373 <div class="testExample">
374 <input id="ticket1651" class="medium" value="not null"/>
378 // See if we can make a widget in script and attach it to the DOM ourselves.
379 dojo.addOnLoad(function(){
385 var w = new dijit.form.TextBox(props, "ticket1651");
389 <div class="dojoTitlePaneLabel">
390 <label for="q24">readOnly test</label>
391 <span class="noticeMessage">a test that readOnly is understood</span>
393 <div class="testExample">
394 <input id="q24" type="text" name="readOnly" class="medium" readOnly value="cannot type here"
395 dojoType="dijit.form.TextBox">
396 <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',false);" value="Remove readOnly">
397 <input type="button" onclick="dijit.byId('q24').setAttribute('readOnly',true);" value="Set readOnly">
401 function displayData() {
402 var f = document.getElementById("form1");
404 for (var i = 0; i < f.elements.length; i++) {
405 var elem = f.elements[i];
406 if (elem.name == "button") { continue; }
407 s += elem.name+(elem.name && elem.disabled?' (disabled)':'') + ": " + elem.value + "\n";
414 <button name="button" onclick="displayData(); return false;">view data</button>
415 <input type="submit" name="submit" />
419 <h2>Tooltip positioning</h2>
421 These buttons switch the positions searched to try to place the validation error tooltips.
422 Note that setting tooltip positioning to "above" or "below" is dangerous if
423 you have a node with a dropdown, but the drop down might overlap the tooltip.
425 <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button>
426 <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button>