<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test Textbox Validation Widgets</title>
<script type="text/javascript">
var djConfig = {
isDebug: true, extraLocale: ['de-de', 'en-us']
};
</script>
<script type="text/javascript" src="../../dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Textbox");
dojo.require("dojo.widget.ValidationTextbox");
dojo.require("dojo.widget.UsTextbox");
dojo.require("dojo.widget.IntegerTextbox");
dojo.require("dojo.widget.InternetTextbox");
dojo.require("dojo.widget.RealNumberTextbox");
dojo.require("dojo.widget.CurrencyTextbox");
dojo.require("dojo.widget.DateTextbox");
dojo.require("dojo.widget.RegexpTextbox");
</script>
<style>
body {
padding: 1em;
}
.formQuestion {
background-color:#d0e3f5;
padding:0.3em;
font-weight:900;
font-family:Verdana, Arial, sans-serif;
font-size:0.8em;
color:#5a5a5a;
}
.formAnswer {
background-color:#f5eede;
padding:0.3em;
margin-bottom:1em;
}
.pageSubContentTitle {
color:#8e8e8e;
font-size:1em;
font-family:Verdana, Arial, sans-serif;
margin-bottom:0.75em;
}
.small {
width: 2.5em;
}
.medium {
width: 10em;
}
.long {
width: 20em;
}
span.invalid, span.missing {
display: inline;
margin-left: 1em;
font-weight: bold;
font-style: italic;
font-family: Arial, Verdana, sans-serif;
color: #f66;
font-size: 0.9em;
}
.errorMessage {
font-weight:bold;
font-family:Arial, Verdana, sans-serif;
color:#ff0000;
font-size:0.9em;
}
.warningMessage {
font-weight:bold;
font-family:Arial, Verdana, sans-serif;
color:#ff9900;
font-size:0.9em;
}
.noticeMessage {
font-weight: normal;
font-family:Arial, Verdana, sans-serif;
color:#663;
font-size:0.9em;
}
.myValidateColorValid {
background-color: #FF0000;
}
.myValidateColorInvalid {
background-color: #00FF00;
}
.myValidateColorEmpty {
background-color: #0000FF;
}
</style>
</head>
<body >
<h2 class="pageSubContentTitle">Test Textbox Validation Widgets</h2>
<form method="get" id="form1" action="">
<div class="formQuestion">
<span class="emphasise">First Name: </span>
<span class="noticeMessage"> Textbox class, Attributes: {trim: true, ucFirst: true, class: 'medium'}, First letter of each word is upper case.</span>
</div>
<div class="formAnswer">
<input id="q1" type="text" name="firstname" value="testing testing" class="medium"
dojoType="Textbox"
trim="true"
ucfirst="true" />
</div>
<div class="formQuestion">
<span class="emphasise">Last Name: </span>
<span class="noticeMessage"> Textbox class, Attributes: {trim: true, uppercase: true, class: 'medium'}, all letters converted to upper case. </span>
</div>
<div class="formAnswer">
<input type="text" name="lastname" value="testing testing" class="medium"
dojoType="Textbox"
trim="true"
uppercase="true" />
</div>
<div class="formQuestion">
<span class="emphasise">Age: </span>
<span class="noticeMessage"> Textbox class, Attributes: {trim: true, digit: true, class: 'small'}, all but digits extracted. </span>
</div>
<div class="formAnswer">
<input type="text" name="age" value="38" class="small"
dojoType="Textbox"
trim="true"
digit="true" />
</div>
<div class="formQuestion">
<span class="emphasise">Occupation: </span>
<span class="noticeMessage">ValidationTextbox class,
Attributes: {lowercase: true, required: true}. Displays message if field is missing. </span>
</div>
<div class="formAnswer">
<input type="text" name="occupation" class="medium"
dojoType="ValidationTextbox"
lowercase="true"
required="true"
missingMessage="* The occupation is required." />
</div>
<div class="formQuestion">
<span class="emphasise">Elevation: </span>
<span class="noticeMessage">IntegerTextbox class,
Attributes: {trim: true, required: true, signed: true classPrefix: "myValidateColor"}, Enter feet above sea level with a sign. (note: these colors are drastically different due to demonstrating the effects of classPrefix.)</span>
</div>
<div class="formAnswer">
<input type="text" name="elevation" class="medium" value="300"
dojoType="IntegerTextbox"
trim="true"
classPrefix="myValidateColor"
required="true"
signed="true"
invalidMessage="Invalid elevation. Be sure to use a plus or minus sign." />
</div>
<div class="formQuestion">
<span class="emphasise">Population: </span>
<span class="noticeMessage">IntegerTextbox class,
Attributes: {trim: true, required: true, signed: false, separator: ","}. <br><b> This widget was added in script, not markup. </b> </span>
</div>
<div class="formAnswer" >
<input id="attach-here" type="text" name="population" class="medium" value="1500000"/>
</div>
<script>
// See if we can make a widget in script and attach it to the DOM ourselves.
dojo.addOnLoad(function(){
var name = "IntegerTextbox";
var props = {
name: "population",
value: "1,500,000",
trim: "true",
required: "true",
signed: "false",
separator: ",",
invalidMessage: "Invalid population. Be sure to use commas."
};
var refNode = document.getElementById("attach-here");
var w = dojo.widget.createWidget(name, props, refNode);
});
</script>
<div class="formQuestion">
<span class="emphasise">Real Number: </span>
<span class="noticeMessage">RealNumberTextbox class,
Attributes: {trim: true, required: true}. Enter any sort of real number.</span>
</div>
<div class="formAnswer">
<input type="text" name="real1" class="medium" value="+0.1234"
dojoType="RealNumberTextbox"
trim="true"
required="true"
invalidMessage="This is not a valid real number." />
</div>
<div class="formQuestion">
<span class="emphasise">Exponential Notation: </span>
<span class="noticeMessage">RealNumberTextbox class,
Attributes: {exponent: true}. Enter a real number in exponential notation.</span>
</div>
<div class="formAnswer">
<input type="text" name="real2" class="medium" value="+0.12"
dojoType="RealNumberTextbox"
trim="true"
required="true"
exponent = "true"
invalidMessage="Number must be in exponential notation. Example +5E-28" />
</div>
<div class="formQuestion">
<span class="emphasise">Annual Income: </span>
<span class="noticeMessage">CurrencyTextbox class,
Attributes: {fractional: true}. Enter dollars and cents.</span>
</div>
<div class="formAnswer">
<input type="text" name="income" class="medium" value="$54,775.53"
dojoType="CurrencyTextbox"
trim="true"
required="true"
fractional = "true"
invalidMessage="Invalid amount. Include dollar sign, commas, and cents. Example: $12,000.00" />
</div>
<div class="formQuestion">
<span class="emphasise">IPv4 Address: </span>
<span class="noticeMessage">IpAddressTextbox class,
Attributes: {allowIPv6: false, allowHybrid: false}. Also Dotted Hex works, 0x18.0x11.0x9b.0x28</span>
</div>
<div class="formAnswer">
<input type="text" name="ipv4" class="medium" value="24.17.155.40"
dojoType="IpAddressTextbox"
trim="true"
required="true"
allowIPv6 = "false"
allowHybrid = "false"
invalidMessage="Invalid IPv4 address." />
</div>
<div class="formQuestion">
<span class="emphasise"> IPv6 Address: </span>
<span class="noticeMessage">IpAddressTextbox class,
Attributes: {allowDottedDecimal: false, allowDottedHex: false}.
Also hybrid works, x:x:x:x:x:x:d.d.d.d</span>
</div>
<div class="formAnswer">
<input type="text" name="ipv6" class="long" value="0000:0000:0000:0000:0000:0000:0000:0000"
dojoType="IpAddressTextbox"
trim="true"
uppercase = "true"
required="true"
allowDottedDecimal = "false"
allowDottedHex = "false"
allowDottedOctal = "false"
invalidMessage="Invalid IPv6 address, please enter eight groups of four hexadecimal digits. x:x:x:x:x:x:x:x" />
</div>
<div class="formQuestion">
<span class="emphasise"> URL: </span>
<span class="noticeMessage">UrlTextbox class,
Attributes: {required: true, trim: true, scheme: true}. </span>
</div>
<div class="formAnswer">
<input type="text" name="url" class="long" value="http://www.xyz.com/a/b/c?x=2#p3"
dojoType="UrlTextbox"
trim="true"
required="true"
scheme = "true"
invalidMessage="Invalid URL. Be sure to include the scheme, http://..." />
</div>
<div class="formQuestion">
<span class="emphasise"> Email Address </span>
<span class="noticeMessage">EmailTextbox class,
Attributes: {required: true, trim: true}. </span>
</div>
<div class="formAnswer">
<input type="text" name="email" class="long" value="fred&barney@stonehenge.com"
dojoType="EmailTextbox"
trim="true"
required="true"
invalidMessage="Invalid Email Address." />
</div>
<div class="formQuestion">
<span class="emphasise"> Email Address List </span>
<span class="noticeMessage">EmailListTextbox class,
Attributes: {required: true, trim: true}. </span>
</div>
<div class="formAnswer">
<input type="text" name="email" class="long" value="a@xyz.com; b@xyz.com; c@xyz.com; "
dojoType="EmailListTextbox"
trim="true"
required="true"
invalidMessage="Invalid Email Address List." />
</div>
<div class="formQuestion">
<span class="emphasise"> Date (American format) </span>
<span class="noticeMessage">DateTextbox class,
Attributes: {lang: "en-us", required: true, trim: true}. Works for leap years</span>
</div>
<div class="formAnswer">
<input type="text" name="date1" class="medium" value="12/30/05" lang="en-us"
dojoType="DateTextbox"
trim="true"
required="true"
invalidMessage="Invalid date. Use M/d/yy format." />
</div>
<div class="formQuestion">
<span class="emphasise"> Date (German format) </span>
<span class="noticeMessage">DateTextbox class,
Attributes: {formatLength:"medium", lang: "de-de", required: true, trim: true}. Works for leap years</span>
</div>
<div class="formAnswer">
<input type="text" name="date2" class="medium" value="30.12.2005" lang="de-de" formatLength="medium"
dojoType="DateTextbox"
trim="true"
required="true"
invalidMessage="Invalid date. Use dd.MM.yyyy format." />
</div>
<div class="formQuestion">
<span class="emphasise"> Date (European format) using format (deprecated in 0.5) </span>
<span class="noticeMessage">DateTextbox class,
Attributes: {format:"YYYY.MM.DD", required: true, trim: true}. Works for leap years</span>
</div>
<div class="formAnswer">
<input type="text" name="date2" class="medium" value="2005.12.30"
dojoType="DateTextbox"
trim="true"
required="true"
format = "YYYY.MM.DD"
invalidMessage="Invalid date. Use YYYY.MM.DD format." />
</div>
<div class="formQuestion">
<span class="emphasise"> 12 Hour Time </span>
<span class="noticeMessage">TimeTextbox class,
Attributes: {formatLength: "medium", required: true, trim: true}</span>
</div>
<div class="formAnswer">
<input type="text" name="time1" class="medium" value="5:45:00 pm" formatLength="medium"
dojoType="TimeTextbox"
trim="true"
required="true"
invalidMessage="Invalid time." />
</div>
<div class="formQuestion">
<span class="emphasise"> 24 Hour Time</span>
<span class="noticeMessage">TimeTextbox class,
Attributes: {displayFormat:"HH:mm:ss", required: true, trim: true}</span>
</div>
<div class="formAnswer">
<input type="text" name="time2" class="medium" value="17:45:00"
dojoType="TimeTextbox"
trim="true"
required="true"
format = "HH:mm:ss"
invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." />
</div>
<div class="formQuestion">
<span class="emphasise"> 24 Hour Time using format attribute (deprecated in 0.5)</span>
<span class="noticeMessage">TimeTextbox class,
Attributes: {format:"HH:mm:ss", required: true, trim: true}</span>
</div>
<div class="formAnswer">
<input type="text" name="time2" class="medium" value="17:45:00"
dojoType="TimeTextbox"
trim="true"
required="true"
format = "HH:mm:ss"
invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours." />
</div>
<div class="formQuestion">
<span class="emphasise"> US State 2 letter abbr. </span>
<span class="noticeMessage">UsStateTextbox class,
Attributes: {required: true, trim: true, uppercase: true}</span>
</div>
<div class="formAnswer">
<input type="text" name="state" class="small" value="CA"
dojoType="UsStateTextbox"
allowTerritories = "false"
trim="true"
uppercase="true"
required="true"
invalidMessage="Invalid US state abbr." />
</div>
<div class="formQuestion">
<span class="emphasise"> US Zip Code </span>
<span class="noticeMessage">UsZipTextbox class,
Attributes: {required: true, trim: true} Five digit Zip code or 5 + 4.</span>
</div>
<div class="formAnswer">
<input type="text" name="zip" class="medium" value="98225-1649"
dojoType="UsZipTextbox"
trim="true"
required="true"
invalidMessage="Invalid US Zip Code." />
</div>
<div class="formQuestion">
<span class="emphasise"> US Social Security Number </span>
<span class="noticeMessage">UsSocialSecurityNumberTextbox class,
Attributes: {required: true, trim: true} </span>
</div>
<div class="formAnswer">
<input type="text" name="ssn" class="medium" value="123-45-6789"
dojoType="UsSocialSecurityNumberTextbox"
trim="true"
required="true"
invalidMessage="Invalid US Social Security Number." />
</div>
<div class="formQuestion">
<span class="emphasise"> 10-digit US Phone Number </span>
<span class="noticeMessage">UsPhoneNumberTextbox class,
Attributes: {required: true, trim: true} </span>
</div>
<div class="formAnswer">
<input type="text" name="phone" class="medium" value="(123) 456-7890"
dojoType="UsPhoneNumberTextbox"
trim="true"
required="true"
invalidMessage="Invalid US Phone Number." />
</div>
<div class="formQuestion">
<span class="emphasise"> Regular Expression </span>
<span class="noticeMessage">RegexpTextbox class,
Attributes: {required: true, trim: true} </span>
</div>
<div class="formAnswer">
<input type="text" name="phone" class="medium" value="someTestString"
dojoType="RegexpTextbox"
regexp="^[\w]+$"
required="true"
invalidMessage="Invalid Non-Space Text." />
</div>
<div class="formQuestion">
<span class="emphasise"> Password </span>
<span class="noticeMessage">(just a test that type attribute is obeyed) </span>
</div>
<div class="formAnswer">
<input type="password" name="password" class="medium"
dojoType="Textbox" />
</div>
<script>
function displayData() {
var f = document.getElementById("form1");
var s = "";
for (var i = 0; i < f.elements.length; i++) {
var elem = f.elements[i];
if (elem.name == "button") { continue; }
s += elem.name + ": " + elem.value + "\n";
}
alert(s);
}
</script>
<div><button name="button" onclick="displayData(); return false;">view data</button></div>
</form>
</body>
</html>