git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_validate.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4         <head>
   5                 <title>Test TextBox Validation Widgets</title>
   6
   7                 <style type="text/css">
   8                         @import "../../../dojo/resources/dojo.css";
   9                         @import "../css/dijitTests.css";
  10
  11                         .testExample {
  12                                 background-color:#fbfbfb;
  13                                 padding:1em;
  14                                 margin-bottom:1em;
  15                                 border:1px solid #bfbfbf;
  16                         }
  17
  18                         body .small {
  19                                 width: 3em;
  20                         }
  21                         body .medium {
  22                                 width: 10em;
  23                         }
  24                         body .long {
  25                                 width: 20em;
  26                         }
  27                         body .verylong {
  28                                 width: 90%;
  29                         }
  30
  31                         .noticeMessage {
  32                                 color:#093669;
  33                                 font-size:0.95em;
  34                                 margin-left:0.5em;
  35                         }
  36
  37                         .dojoTitlePaneLabel label {
  38                                 font-weight:bold;
  39                         }
  40                 </style>
  41
  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>
  45
  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
  53                 </script>
  54         </head>
  55
  56         <body>
  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="">
  61
  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>
  65                         </div>
  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"
  69                                         trim="true"
  70                                         onfocus="console.log('user onfocus handler')"
  71                                         onblur="console.log('user onblur handler')"
  72                                         onChange="dojo.byId('oc1').value=arguments[0]"
  73                                         propercase="true" />
  74                                 <br>onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
  75                         </div>
  76
  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>
  80                         </div>
  81                         <div class="testExample">
  82                                 <input id="q02" type="text" name="lastname" value="testing testing" class="verylong"
  83                                         dojoType="dijit.form.TextBox"
  84                                         trim="true"
  85                                         uppercase="true" />
  86                         </div>
  87
  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>
  91                         </div>
  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"
  96                                         maxLength="3"
  97                                         class="small"
  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"
 101                                         />
 102                         </div>
 103
 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>
 108                         </div>
 109                         <div class="testExample">
 110                                 <input id="q04" type="text" name="occupation" class="verylong" style="font-size:15pt;"
 111                                         dojoType="dijit.form.ValidationTextBox"
 112                                         lowercase="true"
 113                                         required="true"
 114                                         promptMessage="Enter an occupation" />
 115                         </div>
 116
 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>
 121                         </div>
 122                         <div class="testExample">
 123                                 <input id="q05" class="small"/>
 124                                 onChange:<input id="oc5" size="10" disabled value="not fired yet!" autocomplete="off">
 125                         </div>
 126 <script>
 127         // See if we can make a widget in script and attach it to the DOM ourselves.
 128         dojo.addOnLoad(function(){
 129                 var props = {
 130                         name: "elevation",
 131                         value: 3000,
 132                         constraints: {min:-20000,max:20000,places:0},
 133                         promptMessage: "Enter a value between -20000 and +20000",
 134                         required: "true" ,
 135                         invalidMessage: "Invalid elevation.",
 136                         onChange: function(){dojo.byId('oc5').value=arguments[0]},
 137                         "class": "medium"
 138                 };
 139                 var w = new dijit.form.NumberTextBox(props, "q05");
 140         });
 141 </script>
 142 <!--
 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>
 147                         </div>
 148                         <div class="testExample" >
 149                                 <input id="attach-here" type="text" name="population" class="medium" value="1500000"/>
 150                         </div>
 151
 152                         <script>
 153                                 // See if we can make a widget in script and attach it to the DOM ourselves.
 154                                 dojo.addOnLoad(function(){
 155                                         var props = {
 156                                                 name: "population",
 157                                                 value: "1,500,000",
 158                                                 trim: "true",
 159                                                 required: "true",
 160                                                 regExpGen: dojo.regexp.integer,
 161                                                 constraints: {signed:false, separator: ","},
 162                                                 invalidMessage: "Invalid population.  Be sure to use commas."
 163                                         };
 164                                         var w = new dijit.form.ValidationTextBox(props, "attach-here");
 165                                         });
 166                         </script>
 167
 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>
 172                         </div>
 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"
 177                                         trim="true"
 178                                         required="true"
 179                                         invalidMessage="This is not a valid real number." />
 180                         </div>
 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>
 185                         </div>
 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"
 190                                         trim="true"
 191                                         required="true"
 192                                         constraints={exponent:true}
 193                                         invalidMessage="Number must be in exponential notation. Example +5E-28" />
 194                         </div>
 195                         -->
 196
 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>
 201                         </div>
 202
 203                         <div class="testExample">
 204                                 <input id="q08" type="text" name="income1" class="medium" value="54775.53"
 205                                         dojoType="dijit.form.CurrencyTextBox"
 206                                         required="true"
 207                                         constraints="{fractional:true}"
 208                                         currency="USD"
 209                                         onChange="dojo.byId('oc8').value=arguments[0]"
 210                                         invalidMessage="Invalid amount.  Include dollar sign, commas, and cents.  Cents are mandatory." />USD
 211                                 &nbsp;onChange:<input id="oc8" size="15" disabled value="not fired yet!" autocomplete="off">
 212                         </div>
 213
 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"
 219                                         required="true"
 220                                         currency="EUR"
 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>
 225                         </div>
 226
 227                         <!--
 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
 231                         -->
 232                         <div class="testExample">
 233                                 euro currency (fixed lang: de-de) programmatically created, fractional part is optional: <input id="q08eurde" class="medium"/>EUR
 234                         </div>
 235
 236                         <script>
 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"});
 241                                         var props = {
 242                                                 name: "income3",
 243                                                 value: 54775.53,
 244                                                 lang: 'de-de',
 245                                                 required: "true",
 246                                                 currency: "EUR",
 247                                                 invalidMessage: "Invalid amount.  Example: " + example
 248                                         };
 249                                         var w = new dijit.form.CurrencyTextBox(props, "q08eurde");
 250                                 });
 251                         </script>
 252
 253                         <!--
 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>
 258                         </div>
 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"
 263                                         trim="true"
 264                                         required="true"
 265                                         constraints={fractional:true}
 266                                         invalidMessage="Invalid amount.  Include dollar sign, commas, and cents. Example: $12,000.00" />
 267                         </div>
 268
 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>
 273                         </div>
 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"
 278                                         trim="true"
 279                                         required="true"
 280                                         constraints={allowIPv6:false,allowHybrid:false}
 281                                         invalidMessage="Invalid IPv4 address.">
 282                         </div>
 283
 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>
 289                         </div>
 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"
 294                                         trim="true"
 295                                         uppercase = "true"
 296                                         required="true"
 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">
 299                         </div>
 300
 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>
 305                         </div>
 306
 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"
 311                                         trim="true"
 312                                         required="true"
 313                                         constraints={scheme:true}
 314                                         invalidMessage="Invalid URL.  Be sure to include the scheme, http://..." />
 315                         </div>
 316
 317                         <div class="dojoTitlePaneLabel">
 318                                 <label for="q12"> Email Address  </label>
 319                                 <span class="noticeMessage">EmailTextBox class,
 320                                         Attributes: {required: true, trim: true}. </span>
 321                         </div>
 322
 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"
 327                                         trim="true"
 328                                         required="true"
 329                                         invalidMessage="Invalid Email Address." />
 330                         </div>
 331
 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>
 336                         </div>
 337
 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"
 342                                         trim="true"
 343                                         required="true"
 344                                         invalidMessage="Invalid Email Address List." />
 345                         </div>
 346                         -->
 347                         <div class="dojoTitlePaneLabel">
 348                                 <label for="q22">Regular Expression </label>
 349                                 <span class="noticeMessage">RegexpTextBox class,
 350                                         Attributes: {required: true} </span>
 351                         </div>
 352                         <div class="testExample">
 353                                 <input id="q22" type="text" name="phone" class="medium" value="someTestString"
 354                                         dojoType="dijit.form.ValidationTextBox"
 355                                         regExp="[\w]+"
 356                                         required="true"
 357                                         invalidMessage="Invalid Non-Space Text.">
 358                         </div>
 359
 360                         <div class="dojoTitlePaneLabel">
 361                                 <label for="q23"> Password </label>
 362                                 <span class="noticeMessage">(just a test that type attribute is obeyed) </span>
 363                         </div>
 364                         <div class="testExample">
 365                                 <input id="q23" type="password" name="password" class="medium"
 366                                         dojoType="dijit.form.TextBox">
 367                         </div>
 368
 369                         <div class="dojoTitlePaneLabel">
 370                                 <label for="ticket1651">Trac ticket 1651:  </label>
 371                                 <span class="noticeMessage">value: null should show up as empty</span>
 372                         </div>
 373                         <div class="testExample">
 374                                 <input id="ticket1651" class="medium" value="not null"/>
 375                         </div>
 376
 377                         <script>
 378                                         // See if we can make a widget in script and attach it to the DOM ourselves.
 379                                         dojo.addOnLoad(function(){
 380                                                         var props = {
 381                                                                         name: "ticket1651",
 382                                                                         id: "mname",
 383                                                                         value: null
 384                                                         };
 385                                                         var w = new dijit.form.TextBox(props, "ticket1651");
 386                                         });
 387                         </script>
 388
 389                         <div class="dojoTitlePaneLabel">
 390                                 <label for="q24">readOnly test</label>
 391                                 <span class="noticeMessage">a test that readOnly is understood</span>
 392                         </div>
 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">
 398                         </div>
 399
 400                         <script>
 401                                 function displayData() {
 402                                         var f = document.getElementById("form1");
 403                                         var s = "";
 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";
 408                                         }
 409                                         alert(s);
 410                                 }
 411                         </script>
 412
 413                         <div>
 414                                 <button name="button" onclick="displayData(); return false;">view data</button>
 415                                 <input type="submit" name="submit" />
 416                         </div>
 417
 418                 </form>
 419                 <h2>Tooltip positioning</h2>
 420                 <p>
 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.
 424                 </p>
 425                 <button onclick="dijit.Tooltip.defaultPosition=['above', 'below'];">above, below</button>
 426                 <button onclick="dijit.Tooltip.defaultPosition=['after', 'before'];">after, before (default)</button>
 427         </body>
 428 </html>