From 2ef17918e99be70a887b7ddcfc4e8c97cd378473 Mon Sep 17 00:00:00 2001
From: Pat Heard <pat.heard@gmail.com>
Date: Mon, 25 Mar 2013 21:35:43 -0400
Subject: [PATCH] Fixed form validation tab demo and added to french working
 example

---
 demos/tabs/tabs-eng.html | 95 +++++++++++++++++++---------------------
 demos/tabs/tabs-fra.html | 60 ++++++++++++++++++++-----
 2 files changed, 94 insertions(+), 61 deletions(-)

diff --git a/demos/tabs/tabs-eng.html b/demos/tabs/tabs-eng.html
index 8787ce29f7a..950fe279c8c 100644
--- a/demos/tabs/tabs-eng.html
+++ b/demos/tabs/tabs-eng.html
@@ -144,7 +144,7 @@ <h1 id="wb-cont">Tabbed interface</h1>
 		&lt;div id=&quot;tabs1_1&quot;&gt;
 			...
 		&lt;/div&gt;
-		&lt;div id=&quot;tabs1_2&quot;&gt; 
+		&lt;div id=&quot;tabs1_2&quot;&gt;
 			...
 		&lt;/div&gt;
 		&lt;div id=&quot;tabs1_3&quot;&gt;
@@ -200,48 +200,45 @@ <h1 id="wb-cont">Tabbed interface</h1>
 						Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
 				</section></div>
 				<div id="tab2"><section><h4>Tab 2</h4>
-            <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,}" class="{validate:{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,}" class="{validate:{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" class="{validate:{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" class="{validate:{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,}" class="{validate:{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]" class="{validate:{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]" class="{validate:{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}" class="{validate:{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>
+					<div class="wet-boew-formvalid">
+						<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,}" data-rule-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,}" data-rule-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" data-rule-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>
 				</section></div>
 				<div id="tab3"><section><h4>Tab 3</h4>
 					<p><a href="#">fake link</a></p>
@@ -418,8 +415,8 @@ <h2 class="margin-top-none">Tab 9</h2>
 	<div class="clear"></div>
 
 	<section><div class="span-8"><h3 class="background-dark margin-bottom-medium"><code>tabs-style-6</code> design (v3.1 Beta)</h3>
-		<p><strong>Demo includes:</strong> <code>embedded-grid</code>, <code>animate</code>, <code>cycle</code> and <code>slide-horz</code>.</p>		
-		<div class="wet-boew-tabbedinterface embedded-grid tabs-style-6 animate cycle slide-horz">				
+		<p><strong>Demo includes:</strong> <code>embedded-grid</code>, <code>animate</code>, <code>cycle</code> and <code>slide-horz</code>.</p>
+		<div class="wet-boew-tabbedinterface embedded-grid tabs-style-6 animate cycle slide-horz">
 			<div class="tabs-panel">
 				<div id="tab23" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 23</h4>
 					<img height="190" width="700" alt="" src="../grids/images/position.png" class="margin-bottom-none" />
@@ -440,7 +437,7 @@ <h2 class="margin-top-none">Tab 9</h2>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
 					<div class="span-8 position-left position-bottom opacity-90 background-dark">
 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-					</div>	
+					</div>
 				</section></div>
 				<div id="tab25" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 25</h4>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
@@ -452,8 +449,8 @@ <h2 class="margin-top-none">Tab 9</h2>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
 					<div class="span-8 position-left position-bottom opacity-90 background-dark">
 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-					</div>	
-				</section></div> 
+					</div>
+				</section></div>
 			</div>
 			<ul class="tabs">
 				<li class="img"><a href="#tab23"><span class="wb-invisible">Tab 23</span><img src="../grids/images/position-mini-3.png" width="100" height="50" class="image-actual" alt="" /></a></li>
@@ -461,7 +458,7 @@ <h2 class="margin-top-none">Tab 9</h2>
 				<li class="img"><a href="#tab25"><span class="wb-invisible">Tab 25</span><img src="../grids/images/position-mini-1.png" width="100" height="50" class="image-actual" alt="" /></a></li>
 				<li><a href="#tab26">Tab 26</a></li>
 			</ul>
-		</div>		
+		</div>
 	</div></section>
 </section>
 <div class="clear"></div>
diff --git a/demos/tabs/tabs-fra.html b/demos/tabs/tabs-fra.html
index 2da1a685ad2..388a51e6d89 100644
--- a/demos/tabs/tabs-fra.html
+++ b/demos/tabs/tabs-fra.html
@@ -140,7 +140,7 @@ <h1 id="wb-cont">Interface à onglets</h1>
 		&lt;div id=&quot;tabs1_1&quot;&gt;
 			...
 		&lt;/div&gt;
-		&lt;div id=&quot;tabs1_2&quot;&gt; 
+		&lt;div id=&quot;tabs1_2&quot;&gt;
 			...
 		&lt;/div&gt;
 		&lt;div id=&quot;tabs1_3&quot;&gt;
@@ -196,9 +196,45 @@ <h1 id="wb-cont">Interface à onglets</h1>
 						Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
 				</section></div>
 				<div id="tab2"><section><h4>Onglet 2</h4>
-					<p><a href="#tab3"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />Onglet 3</a><br />
-						Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif. Contenu fictif.</p>
-					<p><a href="#">lien fictif</a></p>
+					<div class="wet-boew-formvalid">
+						<form action="#" method="get" id="validation-example">
+							<fieldset><legend>Coordonnées</legend>
+								<label for="title1"><span class="field-name">Titre</span> <strong>(obligatoire)</strong></label>
+								<select id="title1" name="title1" required="required">
+									<option></option>
+									<option value="dr">D. Ph.</option>
+									<option value="esq">Me</option>
+									<option value="mr">M.</option>
+									<option value="ms">Madame</option>
+								</select>
+								<label for="fname"><span class="field-name">Prénom</span> <strong>(obligatoire)</strong></label><input id="fname" name="fname" type="text" required="required" pattern="{2,}" data-rule-minlength="2" />
+								<label for="lname"><span class="field-name">Nom de famille</span> <strong>(obligatoire)</strong></label><input id="lname" name="lname" type="text" required="required" pattern="{2,}" data-rule-minlength="2" />
+								<label for="tel"><span class="field-name">Numéro de téléphone</span> (999-999-9999) <strong>(obligatoire)</strong></label><input id="tel" name="tel" type="tel" required="required" data-rule-phoneUS="true" />
+								<label for="email1"><span class="field-name">Adresse électronique</span></label><input id="email1" name="email1" type="email" />
+								<label for="url1"><span class="field-name">URL du site Web (http://www.url.com)</span></label><input id="url1" name="url1" type="url" />
+							</fieldset>
+							<fieldset><legend>Autres exemples</legend>
+								<label for="date1"><span class="field-name">Date</span> (AAAA-MM-JJ)</label><input id="date1" name="date1" type="date" data-rule-dateISO="true" />
+								<label for="time1"><span class="field-name">Heure</span> (hh:mm)</label><input id="time1" name="time1" type="time" />
+								<label for="an1"><span class="field-name">Alphanumérique</span> (4 caractères minimum)</label><input id="an1" name="an1" type="text" pattern="[A-Za-z0-9\s]{4,}" data-rule-alphanumeric="true" data-rule-minlength="4" />
+								<label for="digits1"><span class="field-name">Chiffres seulement</span></label><input id="digits1" name="digits1" type="number" />
+								<label for="integer1"><span class="field-name">Intègre</span> (entre 5 et 40)</label><input id="integer1" name="integer1" type="number" min="5" max="40" />
+								<label for="letters1"><span class="field-name">Lettres seulement</span> (5 caractères maximum)</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">Lettres et des signes de ponctuation seulement</span> (ponctuation qui est permis&#160;: [. , ( ) "])</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">Mot de passe</span> (entre 5 et 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="Soumettre" class="button button-accent" /> <input type="reset" value="Réinitialiser" class="button" /></div>
+						</form>
+					</div>
+					<div class="clear"></div>
+					<noscript>
+						<p>Ce formulaire ne peut pas être soumis sans Javascript. Veuillez utiliser une des méthodes précisées ci-dessous&#160;:</p>
+						<ul>
+							<li>Méthode 1</li>
+							<li>Méthode 2</li>
+							<li>Méthode n</li>
+						</ul>
+					</noscript>
 				</section></div>
 				<div id="tab3"><section><h4>Onglet 3</h4>
 					<p><a href="#">lien fictif</a></p>
@@ -373,10 +409,10 @@ <h2 class="margin-top-none">Onglet 9</h2>
 		</div>
 	</div></section>
 	<div class="clear"></div>
-	
+
 	<section><div class="span-8"><h3 class="background-dark margin-bottom-medium">Mise en forme&#160;: <code>tabs-style-6</code> (v3.1 Bêta)</h3>
-		<p><strong>La démo comprend&#160;:</strong> les éléments <code>embedded-grid</code>, <code>animate</code>, <code>cycle</code> et <code>slide-horz</code>.</p>		
-		<div class="wet-boew-tabbedinterface embedded-grid tabs-style-6 animate cycle slide-horz">				
+		<p><strong>La démo comprend&#160;:</strong> les éléments <code>embedded-grid</code>, <code>animate</code>, <code>cycle</code> et <code>slide-horz</code>.</p>
+		<div class="wet-boew-tabbedinterface embedded-grid tabs-style-6 animate cycle slide-horz">
 			<div class="tabs-panel">
 				<div id="tab23" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Onglet 23</h4>
 					<img height="190" width="700" alt="" src="../grids/images/position.png" class="margin-bottom-none" />
@@ -397,20 +433,20 @@ <h2 class="margin-top-none">Onglet 9</h2>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
 					<div class="span-8 position-left position-bottom opacity-90 background-dark">
 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-					</div>	
+					</div>
 				</section></div>
 				<div id="tab25" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Onglet 25</h4>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
 					<div class="span-4 position-right position-top-large opacity-90 background-accent">
 						<p>Nam sagittis, eros bibendum vestibulum ultricies, mi elit luctus lectus, non tincidunt felis lectus ut dolor. Curabitur porttitor felis vel lorem malesuada non tristique enim pellentesque. </p>
 					</div>
-				</section></div>	
+				</section></div>
 				<div id="tab26" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Onglet 26</h4>
 					<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
 					<div class="span-8 position-left position-bottom opacity-90 background-dark">
 						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-					</div>	
-				</section></div> 
+					</div>
+				</section></div>
 			</div>
 			<ul class="tabs">
 				<li class="img"><a href="#tab23"><span class="wb-invisible">Onglet 23</span><img src="../grids/images/position-mini-3.png" width="100" height="50" class="image-actual" alt="" /></a></li>
@@ -418,7 +454,7 @@ <h2 class="margin-top-none">Onglet 9</h2>
 				<li class="img"><a href="#tab25"><span class="wb-invisible">Onglet 25</span><img src="../grids/images/position-mini-1.png" width="100" height="50" class="image-actual" alt="" /></a></li>
 				<li><a href="#tab26">Onglet 26</a></li>
 			</ul>
-		</div>		
+		</div>
 	</div></section>
 </section>
 <div class="clear"></div>