Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Form validation demo with updated data-* properties replacing validation meta classes for v1.11.0 compatibility
<!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&#160;(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-.,()'&quot;\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
You can’t perform that action at this time.