Skip to content

Commit

Permalink
Form validation: Added documentation and/or examples of all the jQuer…
Browse files Browse the repository at this point in the history 
…y validation methods with French translations and corrected the telephone number label

Related to #6760
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Jul 17, 2015
1 parent 95314e0 commit 80199aa
Show file tree
Hide file tree
Showing 4 changed files with 338 additions and 14 deletions.
78 changes: 75 additions & 3 deletions site/pages/docs/ref/formvalid/formvalid-en.hbs
View file
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Provides generic validation and error message handling for Web forms.",
"altLangPrefix": "formvalid",
"dateModified": "2014-10-28"
"dateModified": "2015-07-17"
}
---
<span class="wb-prettify all-pre hide"></span>
Expand Down Expand Up @@ -115,6 +115,14 @@
<td><code>data-rule-alphanumeric="true"</code></td>
<td>Alphanumeric</td>
</tr>
<tr>
<td><code>data-rule-cifES="true"</code></td>
<td>CIF code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-creditcard="true"</code></td>
<td>Credit card number</td>
</tr>
<tr>
<td><code>type="date"</code></td>
<td>Date</td>
Expand All @@ -123,10 +131,22 @@
<td><code>type="date" data-rule-dateISO="true"</code></td>
<td>Date (ISO)</td>
</tr>
<tr>
<td><code>type="date" data-rule-dateITA="true"</code></td>
<td>Date (Italy)</td>
</tr>
<tr>
<td><code>type="number"</code></td>
<td>Digits only</td>
</tr>
<tr>
<td><code>type="email"</code></td>
<td>Email</td>
</tr>
<tr>
<td><code>data-rule-equalTo="#x"</code></td>
<td>Equal to field with id = "x"</td>
</tr>
<tr>
<td><code>data-rule-lettersonly="true"</code></td>
<td>Letters only</td>
Expand All @@ -143,26 +163,70 @@
<td><code>max="x"</code></td>
<td>Maximum number x</td>
</tr>
<tr>
<td><code>data-rule-maxWords="x"</code></td>
<td>Maximum of x words</td>
</tr>
<tr>
<td><code>data-rule-minlength="x"</code></td>
<td>Minimum length of x</td>
</tr>
<tr>
<td><code>data-rule-strippedminlength="x"</code></td>
<td>Minimum length of x (when HTML tags are removed)</td>
</tr>
<tr>
<td><code>min="x"</code></td>
<td>Minimum number x</td>
</tr>
<tr>
<td><code>type="email"</code></td>
<td>Email</td>
<td><code>data-rule-minWords="x"</code></td>
<td>Minimum of x words</td>
</tr>
<tr>
<td><code>data-rule-nieES="true"</code></td>
<td>NIE code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-nifES="true"</code></td>
<td>NIF code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-nowhitespace="true"</code></td>
<td>No white space</td>
</tr>
<tr>
<td><code>data-rule-postalCodeCA="true"</code></td>
<td>Postal code (Canada)</td>
</tr>
<tr>
<td><code>data-rule-rangelength="[x,y]"</code></td>
<td>Range (number)</td>
</tr>
<tr>
<td><code>data-rule-rangelength="[x,y]"</code></td>
<td>Range length x to y</td>
</tr>
<tr>
<td><code>data-rule-rangeWords="[x,y]"</code></td>
<td>Range of x to y words</td>
</tr>
<tr>
<td><code>type="tel" data-rule-phoneUK="true"</code></td>
<td>Telephone number (UK)</td>
</tr>
<tr>
<td><code>type="tel" data-rule-mobileUK="true"</code></td>
<td>Mobile number (UK)</td>
</tr>
<tr>
<td><code>type="tel" data-rule-phoneUS="true"</code></td>
<td>Telephone number (US)</td>
</tr>
<tr>
<td><code>data-rule-extension="true"</code></td>
<td>Telephone extension</td>
</tr>
<tr>
<td><code>type="time"</code></td>
<td>Time</td>
Expand All @@ -175,6 +239,14 @@
<td><code>type="url" data-rule-ipv6="true"</code></td>
<td>URL (IPv6)</td>
</tr>
<tr>
<td><code>type="url" data-rule-url2="true"</code></td>
<td>URL (TLD optional)</td>
</tr>
<tr>
<td><code>data-rule-vinUS="true"</code></td>
<td>Vehice Identification Number (VIN, US)</td>
</tr>
</tbody>
</table>
<p>See <a href="http://jqueryvalidation.org/documentation/">jQuery Validation Plugin - Documentation</a> for more details.</p>
Expand Down
78 changes: 75 additions & 3 deletions site/pages/docs/ref/formvalid/formvalid-fr.hbs
View file
Expand Up @@ -6,7 +6,7 @@
"categoryfile": "plugins",
"description": "Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.",
"altLangPrefix": "formvalid",
"dateModified": "2014-10-28"
"dateModified": "2015-07-17"
}
---
<span class="wb-prettify all-pre hide"></span>
Expand Down Expand Up @@ -117,6 +117,14 @@
<td><code>data-rule-alphanumeric="true"</code></td>
<td>Alphanumeric</td>
</tr>
<tr>
<td><code>data-rule-cifES="true"</code></td>
<td>CIF code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-creditcard="true"</code></td>
<td>Credit card number</td>
</tr>
<tr>
<td><code>type="date"</code></td>
<td>Date</td>
Expand All @@ -125,10 +133,22 @@
<td><code>type="date" data-rule-dateISO="true"</code></td>
<td>Date (ISO)</td>
</tr>
<tr>
<td><code>type="date" data-rule-dateITA="true"</code></td>
<td>Date (Italy)</td>
</tr>
<tr>
<td><code>type="number"</code></td>
<td>Digits only</td>
</tr>
<tr>
<td><code>type="email"</code></td>
<td>Email</td>
</tr>
<tr>
<td><code>data-rule-equalTo="#x"</code></td>
<td>Equal to field with id = "x"</td>
</tr>
<tr>
<td><code>data-rule-lettersonly="true"</code></td>
<td>Letters only</td>
Expand All @@ -145,26 +165,70 @@
<td><code>max="x"</code></td>
<td>Maximum number x</td>
</tr>
<tr>
<td><code>data-rule-maxWords="x"</code></td>
<td>Maximum of x words</td>
</tr>
<tr>
<td><code>data-rule-minlength="x"</code></td>
<td>Minimum length of x</td>
</tr>
<tr>
<td><code>data-rule-strippedminlength="x"</code></td>
<td>Minimum length of x (when HTML tags are removed)</td>
</tr>
<tr>
<td><code>min="x"</code></td>
<td>Minimum number x</td>
</tr>
<tr>
<td><code>type="email"</code></td>
<td>Email</td>
<td><code>data-rule-minWords="x"</code></td>
<td>Minimum of x words</td>
</tr>
<tr>
<td><code>data-rule-nieES="true"</code></td>
<td>NIE code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-nifES="true"</code></td>
<td>NIF code (Spain)</td>
</tr>
<tr>
<td><code>data-rule-nowhitespace="true"</code></td>
<td>No white space</td>
</tr>
<tr>
<td><code>data-rule-postalCodeCA="true"</code></td>
<td>Postal code (Canada)</td>
</tr>
<tr>
<td><code>data-rule-rangelength="[x,y]"</code></td>
<td>Range (number)</td>
</tr>
<tr>
<td><code>data-rule-rangelength="[x,y]"</code></td>
<td>Range length x to y</td>
</tr>
<tr>
<td><code>data-rule-rangeWords="[x,y]"</code></td>
<td>Range of x to y words</td>
</tr>
<tr>
<td><code>type="tel" data-rule-phoneUK="true"</code></td>
<td>Telephone number (UK)</td>
</tr>
<tr>
<td><code>type="tel" data-rule-mobileUK="true"</code></td>
<td>Mobile number (UK)</td>
</tr>
<tr>
<td><code>type="tel" data-rule-phoneUS="true"</code></td>
<td>Telephone number (US)</td>
</tr>
<tr>
<td><code>data-rule-extension="true"</code></td>
<td>Telephone extension</td>
</tr>
<tr>
<td><code>type="time"</code></td>
<td>Time</td>
Expand All @@ -177,6 +241,14 @@
<td><code>type="url" data-rule-ipv6="true"</code></td>
<td>URL (IPv6)</td>
</tr>
<tr>
<td><code>type="url" data-rule-url2="true"</code></td>
<td>URL (TLD optional)</td>
</tr>
<tr>
<td><code>data-rule-vinUS="true"</code></td>
<td>Vehice Identification Number (VIN, US)</td>
</tr>
</tbody>
</table>
<p>See <a href="http://jqueryvalidation.org/documentation/">jQuery Validation Plugin - Documentation</a> for more details.</p>
Expand Down
96 changes: 93 additions & 3 deletions src/plugins/formvalid/formvalid-en.hbs
View file
Expand Up @@ -7,7 +7,7 @@
"tag": "formvalid",
"parentdir": "formvalid",
"altLangPrefix": "formvalid",
"dateModified": "2015-03-06"
"dateModified": "2015-07-17"
}
---
<section>
Expand Down Expand Up @@ -80,7 +80,7 @@
</details>

<div class="form-group">
<label for="tel1" class="required"><span class="field-name">Telephone number</span> (999-999-9999) <strong class="required">(required)</strong></label>
<label for="tel1" class="required"><span class="field-name">Telephone number (including area code)</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="tel1" name="tel1" type="tel" required="required" data-rule-phoneUS="true" />
</div>
<details class="mrgn-bttm-md">
Expand All @@ -89,11 +89,41 @@
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="tel1" class="required"&gt;&lt;span class="field-name"&gt;Telephone number&lt;/span&gt; (999-999-9999) &lt;strong class="required"&gt;(required)&lt;/strong&gt;&lt;/label&gt;
&lt;label for="tel1" class="required"&gt;&lt;span class="field-name"&gt;Telephone number&lt;/span&gt; &lt;strong class="required"&gt;(required)&lt;/strong&gt;&lt;/label&gt;
&lt;input class="form-control" id="tel1" name="tel1" type="tel" required="required" data-rule-phoneUS="true" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="ext1"><span class="field-name">Telephone extension</span></label>
<input class="form-control" id="ext1" name="ext1" type="number" data-rule-extension="true" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="ext1"&gt;&lt;span class="field-name"&gt;Telephone extension&lt;/span&gt;&lt;/label&gt;
&lt;input class="form-control" id="ext1" name="ext1" type="number" required="required" data-rule-extension="true" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="pcodeca1" class="required"><span class="field-name">Postal code (Canada)</span> <strong class="required">(required)</strong></label>
<input class="form-control" id="pcodeca1" name="pcodeca1" type="text" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="pcodeca1" class="required"&gt;&lt;span class="field-name"&gt;Postal code&lt;/span&gt; &lt;strong class="required"&gt;(required)&lt;/strong&gt;&lt;/label&gt;
&lt;input class="form-control" id="pcodeca1" name="pcodeca1" type="text" size="7" maxlength="7" required="required" data-rule-postalCodeCA="true" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="email1"><span class="field-name">Email address</span> (yourname@domain.com)</label>
<input class="form-control" id="email1" name="email1" type="email" />
Expand Down Expand Up @@ -247,6 +277,66 @@
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="word1"><span class="field-name">Maximum of 10 words</span></label>
<input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="word1"&gt;&lt;span class="field-name"&gt;Maximum of 10 words&lt;/span&gt;&lt;/label&gt;
&lt;input class="form-control" id="word1" name="word1" type="text" data-rule-maxWords="10" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="word2"><span class="field-name">Maximum of 2 words</span></label>
<input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="word2"&gt;&lt;span class="field-name"&gt;Minimum of 2 words&lt;/span&gt;&lt;/label&gt;
&lt;input class="form-control" id="word2" name="word2" type="text" data-rule-minWords="2" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="word3"><span class="field-name">Between 2 and 10 words</span></label>
<input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="word3"&gt;&lt;span class="field-name"&gt;Between 2 and 10 words&lt;/span&gt;&lt;/label&gt;
&lt;input class="form-control" id="word3" name="word3" type="text" data-rule-rangeWords="[2,10]" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="nowhitespace1"><span class="field-name">No white space</span></label>
<input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" data-rule-nowhitespace="true" />
</div>
<details class="mrgn-bttm-md">
<summary>View code</summary>
<pre><code>&lt;div class="wb-frmvld"&gt;
&lt;form action="#" method="get" id="validation-example"&gt;
...
&lt;div class="form-group"&gt;
&lt;label for="nowhitespace1"&gt;&lt;span class="field-name"&gt;No white space&lt;/span&gt;&lt;/label&gt;
&lt;input class="form-control" id="nowhitespace1" name="nowhitespace1" type="text" pattern="[A-Za-z-.,()'&#34;\s]" data-rule-nowhitespace="true" /&gt;
&lt;/div&gt;</code></pre>
</details>

<div class="form-group">
<label for="password1"><span class="field-name">Password</span> (between 5 and 10 characters)</label>
<input class="form-control" id="password1" name="password1" type="password" maxlength="10" size="10" pattern=".{5,10}" data-rule-rangelength="[5,10]" />
Expand Down

0 comments on commit 80199aa

Please sign in to comment.