fix: errors aren't defined when form is empty

hecht-a · Sep 5, 2022 · 18e261f · 18e261f
1 parent 83c9aad
commit 18e261f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -1,13 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="icon" type="image/svg+xml" href="/vite.svg"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     <title>Vite + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+</head>
+<body>
+<div id="app">
+    <div>
+        <form action="">
+            <label for="name">name</label>
+            <input type="text" name="name" id="name">
+            <label for="firstname">firstname</label>
+            <input type="text" name="firstname" id="firstname">
+            <button type="submit">submit</button>
+        </form>
+    </div>
+</div>
+<script type="module" src="/src/main.ts"></script>
+</body>
 </html>
diff --git a/src/Validator/index.ts b/src/Validator/index.ts
@@ -63,7 +63,7 @@ export class Validator {
      * @param {string} fieldValue
      * @private
      */
-    private runValidator(cbName: string, field: string, fieldValue: string): void {
+    private runValidator(cbName: string, field: string, fieldValue: any): void {
         const rule = this.rules[cbName]
 
         if(rule.cb(fieldValue, ...rule.optionalParams ?? [])) {
@@ -78,11 +78,8 @@ export class Validator {
         for (const field in this._rulesMapping) {
             this._rulesMapping[field].forEach((cbName) => {
                 const fieldValue = this.form.get(field)
-                if (!fieldValue) {
-                    return
-                }
 
-                this.runValidator(cbName, field, fieldValue.toString())
+                this.runValidator(cbName, field, fieldValue)
             })
         }
     }

diff --git a/src/main.ts b/src/main.ts
@@ -3,31 +3,18 @@ import {Validator} from "./Validator";
 import {required} from "./rules/required";
 import {length} from "./rules/length";
 
-document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
-  <div>
-  <form action="">
-    <label for="name">name</label>
-  <input type="text" name="name" id="name">
-  <button type="submit">submit</button>
-</form>
-  </div>
-`
-
 const form = document.querySelector('form')!
 form.addEventListener('submit', (e) => {
     e.preventDefault()
 
     const formData = new FormData(form);
-    const data: Record<string, string> = {name: "name", phone: '0123456789'}
-    for (const key in data) {
-        formData.append(key, data[key])
-    }
 
     const validator = new Validator(formData)
     validator.addRule('required', required)
     validator.addRule('length', length, 10)
 
     validator.setRules('name', ['required', 'length'])
+    validator.setRules('firstname', ['required', 'length'])
     validator.initErrorMessages({
         required: 'Le champ {champ} est requis',
         length: "Le champ {champ} est trop long"