Created
February 6, 2013 06:46
-
-
Save nschonni/4720799 to your computer and use it in GitHub Desktop.
Form validation demo with updated data-* properties replacing validation meta classes for v1.11.0 compatibility
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!--[if IE 7]><html lang="en" class="no-js ie7"><![endif]--> | |
<!--[if IE 8]><html lang="en" class="no-js ie8"><![endif]--> | |
<!--[if gt IE 8]><!--> | |
<html lang="en" class="no-js"> | |
<!--<![endif]--> | |
<head> | |
<meta charset="utf-8" /> | |
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) | |
wet-boew.github.com/wet-boew/License-eng.txt / wet-boew.github.com/wet-boew/Licence-fra.txt --> | |
<title>Form validation - Working examples - Web Experience Toolkit (WET)</title> | |
<link rel="shortcut icon" href="../../dist/theme-gcwu-fegc/images/favicon.ico" /> | |
<meta name="description" content="English description / Description en anglais" /> | |
<meta name="dcterms.creator" content="English name of the content author / Nom en anglais de l'auteur du contenu" /> | |
<meta name="dcterms.title" content="English title / Titre en anglais" /> | |
<meta name="dcterms.issued" title="W3CDTF" content="Date published (YYYY-MM-DD) / Date de publication (AAAA-MM-JJ)" /> | |
<meta name="dcterms.modified" title="W3CDTF" content="Date modified (YYYY-MM-DD) / Date de modification (AAAA-MM-JJ)" /> | |
<meta name="dcterms.subject" title="scheme" content="English subject terms / Termes de sujet en anglais" /> | |
<meta name="dcterms.language" title="ISO639-2" content="eng" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<!--[if lte IE 8]> | |
<script src="../../dist/js/jquery-ie.min.js"></script> | |
<script src="../../dist/js/polyfills/html5shiv-min.js"></script> | |
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/jquery.mobile-ie-min.css" /> | |
<link rel="stylesheet" href="../../dist/grids/css/util-ie-min.css" /> | |
<link rel="stylesheet" href="../../dist/js/css/pe-ap-ie-min.css" /> | |
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ie-min.css" /> | |
<noscript><link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ns-ie-min.css" /></noscript> | |
<![endif]--> | |
<!--[if gt IE 8]><!--> | |
<script src="../../dist/js/jquery.min.js"></script> | |
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/jquery.mobile-min.css" /> | |
<link rel="stylesheet" href="../../dist/grids/css/util-min.css" /> | |
<link rel="stylesheet" href="../../dist/js/css/pe-ap-min.css" /> | |
<link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-min.css" /> | |
<noscript><link rel="stylesheet" href="../../dist/theme-gcwu-fegc/css/theme-ns-min.css" /></noscript> | |
<!--<![endif]--> | |
<!-- CustomScriptsCSSStart --> | |
<!-- CustomScriptsCSSEnd --> | |
</head> | |
<body><div id="wb-body"> | |
<div id="wb-skip"> | |
<ul id="wb-tphp"> | |
<li id="wb-skip1"><a href="#wb-cont">Skip to main content</a></li> | |
<li id="wb-skip2"><a href="#wb-nav">Skip to footer</a></li> | |
</ul> | |
</div> | |
<div id="wb-head"><div id="wb-head-in"><header> | |
<!-- HeaderStart --> | |
<nav role="navigation"><div id="gcwu-gcnb"><h2>Government of Canada navigation bar</h2><div id="gcwu-gcnb-in"><div id="gcwu-gcnb-fip"> | |
<div id="gcwu-sig"><div id="gcwu-sig-in"><div id="gcwu-sig-eng" title="Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/sig-eng.gif" width="214" height="20" alt="Government of Canada" /></div></div></div> | |
<ul> | |
<li id="gcwu-gcnb1"><a rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></li> | |
<li id="gcwu-gcnb2"><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml">Services</a></li> | |
<li id="gcwu-gcnb3"><a rel="external" href="http://www.canada.gc.ca/aboutgov-ausujetgouv/depts/menu-eng.html">Departments</a></li> | |
<li id="gcwu-gcnb-lang"><a href="formvalid-fra.html" lang="fr">Français</a></li> | |
</ul> | |
</div></div></div></nav> | |
<div id="gcwu-bnr" role="banner"><div id="gcwu-bnr-in"> | |
<div id="gcwu-wmms"><div id="gcwu-wmms-in"><div id="gcwu-wmms-fip" title="Symbol of the Government of Canada"><img src="../../dist/theme-gcwu-fegc/images/wmms.gif" width="126" height="30" alt="Symbol of the Government of Canada" /></div></div></div> | |
<div id="gcwu-title"><p id="gcwu-title-in"><a href="../../index-eng.html">Web Experience Toolkit (WET)</a></p></div> | |
<section role="search"><div id="gcwu-srchbx"><h2>Search</h2> | |
<form action="#" method="post"><div id="gcwu-srchbx-in"> | |
<label for="gcwu-srch">Search website</label><input id="gcwu-srch" name="gcwu-srch" type="search" value="" size="27" maxlength="150" /> | |
<input id="gcwu-srch-submit" name="gcwu-srch-submit" type="submit" value="Search" /> | |
</div></form> | |
</div></section> | |
</div></div> | |
<nav role="navigation"> | |
<div id="gcwu-psnb"><h2><span>Site </span>menu</h2><div id="gcwu-psnb-in"><div class="wet-boew-menubar mb-mega"><div> | |
<ul class="mb-menu" data-ajax-replace="../includes/menu-eng.txt"> | |
<li><div><a href="http://wet-boew.github.com/wet-boew/index-eng.html">WET project</a></div></li> | |
<li><div><a href="section2/index-eng.html">Section 2</a></div></li> | |
<li><div><a href="#">Section 3</a></div></li> | |
<li><div><a href="#">Section 4</a></div></li> | |
<li><div><a href="#">Section 5</a></div></li> | |
<li><div><a href="#">Section 6</a></div></li> | |
<li><div><a href="#">Section 7</a></div></li> | |
</ul> | |
</div></div></div></div> | |
<div id="gcwu-bc"><h2>Breadcrumb trail</h2><div id="gcwu-bc-in"> | |
<ol> | |
<li><a href="../../index-eng.html">Home</a></li> | |
<li><a href="../index-eng.html">Working examples</a></li> | |
<li>Form validation</li> | |
</ol> | |
</div></div> | |
</nav> | |
<!-- HeaderEnd --> | |
</header></div></div> | |
<div id="wb-core"><div id="wb-core-in" class="equalize"> | |
<div id="wb-main" role="main"><div id="wb-main-in"> | |
<!-- MainContentStart --> | |
<h1 id="wb-cont">Form validation</h1> | |
<ul class="button-group"> | |
<li><a href="https://github.com/wet-boew/wet-boew/wiki/Form-validation" class="button button-info">Documentation</a></li> | |
<li><a href="https://github.com/wet-boew/wet-boew/issues/new" class="button">Questions or comments?</a></li> | |
</ul> | |
<div class="wet-boew-formvalid span-8"> | |
<form action="#" method="get" id="validation-example"> | |
<fieldset><legend>Contact information</legend> | |
<label for="title1"><span class="field-name">Title</span> <strong>(required)</strong></label> | |
<select id="title1" name="title1" required="required"> | |
<option></option> | |
<option value="dr">Dr.</option> | |
<option value="esq">Esq.</option> | |
<option value="mr">Mr.</option> | |
<option value="ms">Ms.</option> | |
</select> | |
<label for="fname1"><span class="field-name">First Name</span> <strong>(required)</strong></label> | |
<input id="fname1" name="fname1" type="text" required="required" pattern="{2,}" minlength="2" /> | |
<label for="lname1"><span class="field-name">Last Name</span> <strong>(required)</strong></label> | |
<input id="lname1" name="lname1" type="text" required="required" pattern="{2,}" minlength="2" /> | |
<label for="tel1"><span class="field-name">Telephone Number</span> (999-999-9999) <strong>(required)</strong></label> | |
<input id="tel1" name="tel1" type="tel" required="required" data-rule-phoneUS="true" /> | |
<label for="email1"><span class="field-name">Email Address</span></label> | |
<input id="email1" name="email1" type="email" /> | |
<label for="url1"><span class="field-name">Website URL (http://www.url.com)</span></label> | |
<input id="url1" name="url1" type="url" /> | |
</fieldset> | |
<fieldset><legend>Other examples</legend> | |
<label for="date1"><span class="field-name">Date</span> (YYYY-MM-DD)</label> | |
<input id="date1" name="date1" type="date" data-rule-dateISO="true" /> | |
<label for="time1"><span class="field-name">Time</span> (hh:mm)</label> | |
<input id="time1" name="time1" type="time" /> | |
<label for="an1"><span class="field-name">Alphanumeric</span> (at least 4 characters)</label> | |
<input id="an1" name="an1" type="text" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" minlength="4" /> | |
<label for="digits1"><span class="field-name">Digits only</span></label> | |
<input id="digits1" name="digits1" type="number" /> | |
<label for="integer1"><span class="field-name">Integer</span> (between 5 and 40)</label> | |
<input id="integer1" name="integer1" type="number" min="5" max="40" /> | |
<label for="letters1"><span class="field-name">Letters only</span> (maximum of 5 characters)</label> | |
<input id="letters1" name="letters1" type="text" size="5" maxlength="5" pattern="[A-Za-z\s]" data-rule-lettersonly="true" /> | |
<label for="text1"><span class="field-name">Letters and punctuation only</span> (allowed punctuation: [. , ( ) "])</label> | |
<input id="text1" name="text1" type="text" pattern="[A-Za-z-.,()'"\s]" data-rule-letterswithbasicpunc="true" /> | |
<label for="password1"><span class="field-name">Password</span> (between 5 and 10 characters)</label> | |
<input id="password1" name="password1" type="password" maxlength="10" size="10" pattern="{5,10}" data-rule-rangelength="[5,10]" /> | |
</fieldset> | |
<div class="form-inline"> | |
<input type="submit" value="Submit" class="button button-accent"/> | |
<input type="reset" value="Reset" class="button" /> | |
</div> | |
</form> | |
</div> | |
<div class="clear"></div> | |
<noscript> | |
<p>This form cannot be submitted without JavaScript. You may use one of the following methods:</p> | |
<ul> | |
<li>Method 1</li> | |
<li>Method 2</li> | |
<li>Method n</li> | |
</ul> | |
</noscript> | |
<dl id="gcwu-date-mod" role="contentinfo"> | |
<dt>Date modified:</dt><dd><span><time>2012-09-17</time></span></dd> | |
</dl> | |
<div class="clear"></div> | |
<!-- MainContentEnd --> | |
</div></div> | |
</div></div> | |
<div id="wb-foot"><div id="wb-foot-in"><footer><h2 id="wb-nav">Footer</h2> | |
<!-- FooterStart --> | |
<nav role="navigation"><div id="gcwu-sft"><h3>Site footer</h3><div id="gcwu-sft-in"> | |
<div id="gcwu-tctr"> | |
<ul> | |
<li class="gcwu-tc"><a href="#" rel="license">Terms and conditions</a></li> | |
<li class="gcwu-tr"><a href="#">Transparency</a></li> | |
</ul> | |
</div> | |
<div class="clear"></div> | |
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">About us</a></h4> | |
<ul> | |
<li><a href="#">Our Mandate</a></li> | |
<li><a href="#">The Minister</a></li> | |
</ul> | |
</div></section> | |
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">News</a></h4> | |
<ul> | |
<li><a href="#">News releases</a></li> | |
<li><a href="#">Media advisories</a></li> | |
<li><a href="#">Multimedia</a></li> | |
</ul> | |
</div></section> | |
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Contact us</a></h4> | |
<address> | |
<ul> | |
<li><a href="#">Phone numbers</a></li> | |
<li><a href="#">Office locations</a></li> | |
</ul> | |
</address> | |
</div></section> | |
<section><div class="span-2"><h4 class="gcwu-col-head"><a href="#">Stay connected</a></h4> | |
<ul> | |
<li><a rel="external" href="#">YouTube</a></li> | |
<li><a rel="external" href="#">Twitter</a></li> | |
<li><a href="#">Feeds</a></li> | |
</ul> | |
</div></section> | |
</div></div></nav> | |
<nav role="navigation"><div id="gcwu-gcft"><h3>Government of Canada footer</h3><div id="gcwu-gcft-in"><div id="gcwu-gcft-fip"> | |
<ul> | |
<li><a rel="external" href="http://healthycanadians.gc.ca/index-eng.php"><span>Health</span><br />healthycanadians.gc.ca</a></li> | |
<li><a rel="external" href="http://www.voyage.gc.ca/index-eng.asp"><span>Travel</span><br />travel.gc.ca</a></li> | |
<li><a rel="external" href="http://www.servicecanada.gc.ca/eng/home.shtml"><span>Service Canada</span><br />servicecanada.gc.ca</a></li> | |
<li><a rel="external" href="http://www.jobbank.gc.ca/intro-eng.aspx"><span>Jobs</span><br />jobbank.gc.ca</a></li> | |
<li><a rel="external" href="http://actionplan.gc.ca/en"><span>Economy</span><br />actionplan.gc.ca</a></li> | |
<li id="gcwu-gcft-ca"><div><a rel="external" href="http://www.canada.gc.ca/menu-eng.html">Canada.gc.ca</a></div></li> | |
</ul> | |
</div></div></div></nav> | |
<!-- FooterEnd --> | |
</footer> | |
</div></div></div> | |
<!-- ScriptsStart --> | |
<!--[if lte IE 8]> | |
<script src="../../dist/theme-gcwu-fegc/js/theme-ie-min.js"></script> | |
<script src="../../dist/js/settings-ie.js"></script> | |
<script src="../../dist/js/pe-ap-ie-min.js"></script> | |
<script src="../../dist/js/jquerymobile/jquery.mobile-ie.min.js"></script> | |
<![endif]--> | |
<!--[if gt IE 8]><!--> | |
<script src="../../dist/theme-gcwu-fegc/js/theme-min.js"></script> | |
<script src="../../dist/js/settings.js"></script> | |
<script src="../../dist/js/pe-ap-min.js"></script> | |
<script src="../../dist/js/jquerymobile/jquery.mobile.min.js"></script> | |
<!--<![endif]--> | |
<!-- ScriptsEnd --> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment