[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpform
/
zpform
/
demo
/
[
Home
]
File: types.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" This form shows the built-in Zapatec data types that you can specify in your forms. You can easily define new data types with regular expressions, masks or custom javascript. View the page source to see the use of zpFormCurr and Zapatec.Form.addDataType to implement a custom data type for Currency. Currency must have the format of dollars followed by a decimal point followed by cents OR a decimal point followed by cents. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Form Widget - Form Data Types</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type='text/javascript' src='../src/form.js'></script> <script type='text/javascript' src='demo.js'></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <!-- Theme css --> <link href="../themes/winxp.css" rel="stylesheet" type="text/css"> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Form Data Types</div> <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>winxp theme</b>.</li> <li>This form shows the built-in Zapatec data types that you can specify in your forms.</li> <li>You can easily define new data types with regular expressions, masks or custom javascript.</li> <li>View the page source to see the use of zpFormCurr and Zapatec.Form.addDataType to implement a custom data type for Currency.</li> <li>Currency must have the format of dollars followed by a decimal point followed by cents OR a decimal point followed by cents.</li> </ul> </div> <br /> <br /> <form action="types.html" id='userForm' class="zpFormWinXP" method="post"> <fieldset> <legend>Custom Types</legend> <label class='zpFormLabel'>Currency</label> <input value='' class='zpFormCurr' size='30' name='currency' type='text' /> <br /> <br /> </fieldset> <fieldset> <legend>Basic Types</legend> <label class='zpFormLabel'>Text</label> <input class='zpFormRequired' value="" size="40" name="name" type="text" /> <br /> <label class='zpFormLabel'>Date</label> <input value="" size="23" name="date" type="text" class='zpFormDate zpFormMask="00\/00\/0000"' /> <br /> <label class='zpFormLabel'>Integer</label> <input value="" size="23" name="int" type="text" class='zpFormInt' /> <br /> <label class='zpFormLabel'>Float</label> <input value="" size="23" name="float" type="text" class='zpFormFloat' /> <br /> </fieldset> <fieldset> <legend>US Types</legend> <label class='zpFormLabel'>Zip</label> <input value="" class='zpFormRequired zpFormUSZip zpFormMask="00000"' size="10" name="zip" type="text" /> <br /> <label class='zpFormLabel'>US Phone</label> <input value="" size="23" name="usnumber" type="text" class='zpFormUSPhone zpFormMask="\(000\)\ 000\-0000"' /> <br /> </fieldset> <fieldset> <legend>Online Types</legend> <label class='zpFormLabel'>Email</label> <input value="" size="40" name="email" type="text" class='zpFormEmail' /> <br /> <label class='zpFormLabel'>URL</label> <input value="" size="40" name="url" class='zpFormUrl' type="text" /> <br /> </fieldset> <input value="Submit" name="Submit" onclick="" type="submit" class="button" /> <input value="Clear" name="Clear" onclick="" type="reset" class="button" /> </form> <script type="text/javascript"> // Run this to auto-activate all "zpForm" class forms in the document. Zapatec.Form.setupAll({showErrors: "afterField"}); // create a custom data type Zapatec.Form.Validator.addDataType( // Zapatec Name to be put in INPUT class 'zpFormCurr', // Friendly description 'A Currency field', // Regular Expression for Validation /(^[0-9]+(\.[0-9]{2})?$)/, // Error message "Invalid Currency", // Help message "Valid currency is ##.##", // Function null ); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Form Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>