[ 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: show_errors.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=" If showErrors contains reference to JavaScript function - this function will be used to display error message for given field. Function receives reference to field DOM element as first argument and error message as second argument. If second argument is not specified - this means that field is valid. You can use this to hide error message from page. In current demo error message is displayed inside DIV element. This element is hidden if field is valid. "> <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 - Display field errors using custom function</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;'>Display field errors using custom function</div> <div class='zpCalDemoText'> <ul> <li>This demo uses the <b>winxp theme</b>.</li> <li>If <i>showErrors</i> contains reference to JavaScript function - this function will be used to display error message for given field.</li> <li>Function receives reference to field DOM element as first argument and error message as second argument.</li> <li>If second argument is not specified - this means that field is valid. You can use this to hide error message from page.</li> <li>In current demo error message is displayed inside DIV element. This element is hidden if field is valid.</li> </ul> </div> <form action="show_errors.html" id='userForm' method="post"> <div id='errOutput' class="errOutput"></div> <div class="zpFormContent"> <fieldset> <legend>Personal information</legend> <label class='zpFormLabel'>Name</label> <input class='zpFormRequired' value="" size="40" name="name" type="text" > <br /> <label class='zpFormLabel'>Address</label> <input class='zpFormRequired' value="" size="40" name="address" type="text" > <br /> <label class='zpFormLabel'>Date of Birth</label> <input value="" size="23" name="dob" type="text" class='zpFormDate zpFormMask="00\/00\/0000"'> <br /> <label class='zpFormLabel'>Date of Birth(d.m.y)</label> <input value="" size="23" name="dob" type="text" class='zpFormDate="%d.%m.%y" zpFormMask="00\.00\.0000"'> <br /> <br /> <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 /> <label class='zpFormLabel'>International phone</label> <input value="" size="23" name="international_number" type="text" class='zpFormInternationalPhone'> <br /> <br /> <label class='zpFormLabel'>Resume</label> <textarea name="resume" cols="40" rows="10" class="zpFormRequired"></textarea> <br /> </fieldset> <fieldset> <legend>Online Information</legend> <label class='zpFormLabel'>Email</label> <input value="" size="40" name="email" type="text" class='zpFormEmail'> <br /> <label class='zpFormLabel'>Alternate Email</label> <input value="" size="40" name="alternate_email" type="text" class='zpFormRequired zpFormEmail'> <br /> <label class='zpFormLabel'>URL</label> <input value="" size="40" name="url" class='zpFormUrl' type="text" > <br /> <div style="line-height: 1px; clear: both;"> </div> </fieldset> </div> <div class="zpFormButtons"> <input value="Submit" name="Submit" onclick="" type="submit" class="button"> <input value="Clear" name="Clear" onclick="" type="reset" class="button"> </div> </form> <script type="text/javascript"> var console = document.getElementById("errOutput"); function myShowErrors(field, error){ console.innerHTML = ""; if(error){ var text = "Field " + field.name + " has error: " + error; console.appendChild(document.createTextNode(text)); console.style.display = "block"; } else { console.style.display = "none"; } } // Run this to auto-activate all "zpForm" class forms in the document. new Zapatec.Form({ form: 'userForm', showErrors: myShowErrors, showErrorsOnSubmit: true, submitErrorFunc: testErrOutput, theme: "WinXP" }); </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>