Merge pull request #92 from horprogs/allow-using-elements-as-keys

#64 Allow using elements as keys

Author: horprogs

.github/workflows/release.yml

@@ -2,6 +2,8 @@ name: Test and Release
 on:
   workflow_dispatch:
   push:
+    branches:
+      - master
 jobs:
   test:
     name: Lint and Test

site/documentation/index.html

@@ -138,6 +138,11 @@
                 >showSuccessLabels</a
               >
             </li>
+            <li class="nav-item">
+              <a class="nav-link scrollto" href="#section-5-13"
+                >setCurrentLocale</a
+              >
+            </li>
             <li class="nav-item section-title mt-3">
               <a class="nav-link scrollto" href="#section-6">Rules</a>
             </li>
@@ -231,7 +236,7 @@ <h2>yarn</h2>
             <header class="docs-header">
               <h1 class="docs-heading">
                 Quick start
-                <span class="docs-time">Last updated: 2022-03-16</span>
+                <span class="docs-time">Last updated: 2022-12-10</span>
               </h1>
             </header>
             <section class="docs-intro">
@@ -292,6 +297,23 @@ <h1 class="docs-heading">
       rule: 'email',
       errorMessage: 'Email is invalid!',
     },
+  ]);</code></pre>
+              <br />
+              Also it is possible to use a DOM element as a field in the
+              <code>.addField()</code> method.
+
+              <pre><code class="language-javascript">
+validation
+  .addField(document.querySelector('#email'), [
+    {
+      rule: 'minLength',
+      value: 3,
+    },
+    {
+      rule: 'maxLength',
+      value: 30,
+    },
+  ])
   ]);</code></pre>
               And that's it! Now our form is validated!
             </section>
@@ -734,15 +756,15 @@ <h1 class="docs-heading">
             <header class="docs-header">
               <h1 class="docs-heading">
                 Methods
-                <span class="docs-time">Last updated: 2022-05-18</span>
+                <span class="docs-time">Last updated: 2022-12-09</span>
               </h1>
             </header>
             <section class="docs-section" id="section-5-1">
               <h2 class="section-heading">addField</h2>
               <p>Defines validation rules for the new field.</p>
 
               <pre><code class="language-html">.addField(<br />
-&nbsp;&nbsp;field: string,<br />
+&nbsp;&nbsp;field: string | HTMLInputElement,<br />
 &nbsp;&nbsp;rules: {<br />
 &nbsp;&nbsp; &nbsp;rule?: Rules;<br />
 &nbsp;&nbsp; &nbsp;errorMessage?: string | (<br />
@@ -1021,7 +1043,7 @@ <h2 class="section-heading">revalidateField</h2>
                 Method to trigger a field validation manually. Returns a promise
                 with a boolean value - valid/invalid field.
               </p>
-              <pre><code class="language-html">.revalidateField(field: string).then(isValid =&gt; {})</code></pre>
+              <pre><code class="language-html">.revalidateField(field: string | HTMLInputElement).then(isValid =&gt; {})</code></pre>
             </section>
             <section class="docs-section" id="section-5-6">
               <h2 class="section-heading">revalidate</h2>
@@ -1053,7 +1075,7 @@ <h2 class="section-heading">removeField</h2>
                 Method to remove validation rules/events/errors from the
                 particular field
               </p>
-              <pre><code class="language-html">.removeField(field: string)</code></pre>
+              <pre><code class="language-html">.removeField(field: string | HTMLInputElement)</code></pre>
             </section>
             <section class="docs-section" id="section-5-10">
               <h2 class="section-heading">removeGroup</h2>
@@ -1077,6 +1099,13 @@ <h2 class="section-heading">showSuccessLabels</h2>
               <p>For example:</p>
               <pre><code class="language-html">.showSuccessLabels({ '#email': 'The email looks good!' })</code></pre>
             </section>
+            <section class="docs-section" id="section-5-13">
+              <h2 class="section-heading">setCurrentLocale</h2>
+              <p>Method to change current locale</p>
+              <pre><code class="language-html">.setCurrentLocale(locale?: string)</code></pre>
+              <p>For example:</p>
+              <pre><code class="language-html">.setCurrentLocale('es')</code></pre>
+            </section>
 
             <!--//section-->
           </article>

src/demo.ts

@@ -21,6 +21,10 @@ const basic = (): void => {
     lockForm: true,
   });
 
+  const emailElem = document.querySelector(
+    '#example1_email'
+  ) as HTMLInputElement;
+
   validation
     .addField('#example1_name', [
       {
@@ -32,7 +36,7 @@ const basic = (): void => {
         value: 15,
       },
     ])
-    .addField('#example1_email', [
+    .addField(emailElem, [
       {
         rule: 'required' as Rules,
       },
@@ -62,6 +66,17 @@ const basic = (): void => {
       ev?.preventDefault();
       window.showNotification();
     });
+
+  validation.addField('#example1_name', [
+    {
+      rule: 'minLength' as Rules,
+      value: 10,
+    },
+    {
+      rule: 'maxLength' as Rules,
+      value: 15,
+    },
+  ]);
 };
 
 const advanced = (): void => {