Refinement of the form

08/index.js

@@ -220,36 +220,31 @@ passChange();
 // Form
 
 function Form(el = sFormContainer, data, okCallback, cancelCallback) {
+  let initState = data;
+  let flags = {};
+  for (let key in data) {
+    key[0] !== "*" ? (flags[key] = true) : (flags[key.slice(1)] = false);
+  }
   let formBody = document.createElement("div");
+  formBody.id = "formBody";
+  let table = document.createElement("table");
+  table.setAttribute("border", "1");
+  formBody.append(table);
+  let buttons = document.createElement("div");
   let okButton = document.createElement("button");
   okButton.innerHTML = "OK";
-
+  okButton.disabled = true;
   let cancelButton = document.createElement("button");
   cancelButton.innerHTML = "Cancel";
 
-  formBody.innerHTML = "<h1>тут будет форма после перервы</h1>";
-  const table = document.createElement("table");
-  table.setAttribute("border", "1");
-  formBody.append(table);
-
-  if (typeof okCallback === "function") {
-    formBody.appendChild(okButton);
-    okButton.onclick = (e) => {
-      this.okCallback(e);
-    };
-  }
-
-  if (typeof cancelCallback === "function") {
-    formBody.appendChild(cancelButton);
-    cancelButton.onclick = cancelCallback;
-  }
+  this.validators = {};
 
   let inputCreators = {
     String(key, value, oninput) {
       let input = document.createElement("input");
-      input.type = "text";
-      input.placeholder = key;
-      input.value = value;
+      input.type = /[*]/g.test(value) ? "password" : "text";
+      input.value = /[*]/g.test(value) ? "" : value;
+      input.placeholder = key[0] === "*" ? key.slice(1) : key;
       input.oninput = () => oninput(input.value);
       return input;
     },
@@ -271,64 +266,127 @@ function Form(el = sFormContainer, data, okCallback, cancelCallback) {
     },
     Number(key, value, oninput) {
       let input = document.createElement("input");
-      input.type = "text";
-      input.placeholder = key;
+      input.type = "number";
+      input.placeholder = key[0] === "*" ? key.slice(1) : key;
       input.value = value;
       input.oninput = () => oninput(input.value);
       return input;
     },
   };
 
-  el.appendChild(formBody);
+  let flagsArray = [];
 
-  for (let key in data) {
+  for (let [key, value] of Object.entries(data)) {
     const tr = document.createElement("tr");
-    table.append(tr);
-
     const th = document.createElement("th");
-    th.innerText = key;
-    tr.append(th);
+    th.innerHTML =
+      key[0] === "*"
+        ? `<span style="color: #ff0000">${key[0]}</span> ${key.slice(1)}`
+        : key;
 
     const td = document.createElement("td");
-    tr.append(td);
-
-    const error = document.createElement("td");
 
-    const input = inputCreators[data[key].constructor.name](
+    const error = document.createElement("span");
+    error.style.color = "red";
+    const input = inputCreators[value.constructor.name](
       key,
-      data[key],
+      value,
       (valueInput) => {
-        if (key in this.validators) {
-          let valid = this.validators[key](valueInput, key, data, input);
-          if (valid) {
-            data[key] = valueInput;
-            error.innerText = "";
-          } else if (typeof valid === "string") {
-            error.innerText = valid;
-            input.style.color = "red";
+        value = valueInput;
+      }
+    );
+
+    td.append(input);
+    tr.append(th);
+    tr.append(td);
+
+    if (key[0] === "*" && value === "") {
+      flags[key.slice(1)] = false;
+      error.innerText = `Required ${key.slice(1)} field is not filled`;
+      td.append(error);
+    }
+
+    if (key[0] === "*" && value.length > 0) {
+      flags[key.slice(1)] = true;
+    }
+
+    flagsArray = Object.values(flags);
+
+    function checkButtons(callback, nameCallback, flags) {
+      if (typeof callback === "function") {
+        if (nameCallback === "okCallback") {
+          buttons.appendChild(okButton);
+          formBody.appendChild(buttons);
+          if (flags.some((e) => e === false)) {
+            okButton.disabled = true;
+          } else {
+            okButton.disabled = false;
+            callback(data);
+            okButton.onclick = (e) => {
+              callback(e);
+            };
           }
+        }
+        if (nameCallback === "cancelCallback") {
+          buttons.appendChild(cancelButton);
+          formBody.appendChild(buttons);
+          cancelButton.onclick = () => {
+            formBody.remove();
+            buttons.remove();
+            Form(
+              sFormContainer,
+              initState,
+              () => console.log("ok"),
+              () => console.log("cancel")
+            );
+            callback();
+          };
+        }
+      }
+    }
+    checkButtons(okCallback, "okCallback", flagsArray);
+    checkButtons(cancelCallback, "cancelCallback", flagsArray);
+
+    input.onchange = () => {
+      let keyCheck = key[0] === "*" ? key.slice(1) : key;
+      if (
+        Object.keys(this.validators).length !== 0 &&
+        keyCheck in this.validators
+      ) {
+        let check = this.validators[keyCheck](value, key, data, input);
+        if (check) {
+          flags[keyCheck] = true;
+          input.style.border = "";
+          error.innerText = "";
         } else {
-          data[key] = valueInput;
+          flags[keyCheck] = false;
+          input.style.border = "1px solid red";
+          error.innerText = `Invalid ${keyCheck} entered or a required field is missing`;
         }
+        td.append(error);
+        tr.append(td);
+        flagsArray = Object.values(flags);
       }
-    );
-    td.append(input);
-    tr.append(error);
+      checkButtons(okCallback, "okCallback", flagsArray);
+      checkButtons(cancelCallback, "cancelCallback", flagsArray);
+    };
+    table.append(tr);
   }
 
+  el.appendChild(formBody);
+  el.appendChild(buttons);
+
   this.okCallback = okCallback;
   this.cancelCallback = cancelCallback;
-
   this.data = data;
-  this.validators = {};
-  console.log(this.validators);
 }
 
 let form = new Form(
   sFormContainer,
   {
-    name: "Anakin",
-    surname: "Skywalker",
+    "*name": "Anakin",
+    "*surname": "Skywalker",
+    "*password": "****************",
     married: true,
     birthday: new Date(new Date().getTime() - 86400000 * 30 * 365),
   },
@@ -336,9 +394,48 @@ let form = new Form(
   () => console.log("cancel")
 );
 form.okCallback = () => console.log("ok2");
+form.cancelCallback = () => console.log("cancel2");
+
+form.validators.name = (value, key, data, input) => {
+  if (key[0] === "*") {
+    if (
+      value.length > 3 &&
+      value[0].toUpperCase() === value[0] &&
+      !value.includes(" ")
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return true;
+  }
+};
+
+form.validators.surname = (value, key, data, input) => {
+  if (key[0] === "*") {
+    if (
+      value.length > 3 &&
+      value[0].toUpperCase() === value[0] &&
+      !value.includes(" ")
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return true;
+  }
+};
 
-form.validators.surname = (value, key, data, input) =>
-  value.length > 2 && value[0].toUpperCase() == value[0] && !value.includes(" ")
-    ? true
-    : "Wrong name";
-console.log(form);
+form.validators.password = (value, key, data, input) => {
+  if (key[0] === "*") {
+    if (value.length > 7 && !value.includes(" ")) {
+      return true;
+    } else {
+      return false;
+    }
+  } else {
+    return true;
+  }
+};