Skip to content

Commit

Permalink
Fixed form validation tab demo and added to french working example
Browse files Browse the repository at this point in the history
  • Loading branch information
@patheard
patheard committed Mar 26, 2013
1 parent f48d920 commit 2ef1791
Show file tree
Hide file tree
Showing 2 changed files with 94 additions and 61 deletions.
95 changes: 46 additions & 49 deletions demos/tabs/tabs-eng.html
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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" />
Expand All @@ -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="" />
Expand All @@ -452,16 +449,16 @@ <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>
<li class="img"><a href="#tab24"><span class="wb-invisible">Tab 24</span><img src="../grids/images/position-mini-2.png" width="100" height="50" class="image-actual" alt="" /></a></li>
<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>
Expand Down
60 changes: 48 additions & 12 deletions demos/tabs/tabs-fra.html
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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" />
Expand All @@ -397,28 +433,28 @@ <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>
<li class="img"><a href="#tab24"><span class="wb-invisible">Onglet 24</span><img src="../grids/images/position-mini-2.png" width="100" height="50" class="image-actual" alt="" /></a></li>
<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>
Expand Down

0 comments on commit 2ef1791

Please sign in to comment.