almost done. the code commited is dirty and not supposed to be looked at

hw9/script.js

@@ -292,51 +292,117 @@ function Form(el, data, okCallback, cancelCallback){
     el.appendChild(formBody)
 
 
+    let checkInfo = (value, key, data, input, err) => {
+        for(let key in this.validators) {
+            if(key === 'isValid') continue;
+            this.validators.isValid[key] = false
+        }
+        console.dir(this.validators)
+        let validCheck
+        let keyFormated = key
+        try {
+            if(key[0] === "*") {
+                keyFormated = key.substring(1)
+                if(this.validators.mandatoryErr(value, key) === true) {
+                    validCheck = this.validators[keyFormated]? this.validators[keyFormated](value, keyFormated) : true
+                    input.style.backgroundColor = 'transparent'
+                    input.style.color = 'black'
+                    console.log(input)
+                    err.innerText = ''
+
+                } else {
+                    err.innerText = this.validators.mandatoryErr(value, keyFormated)
+                    this.validators.isValid[key] = false
+                }
+
+            } else {
+                validCheck = this.validators[keyFormated]? this.validators[keyFormated](value, keyFormated) : true
+            }
+            console.log('validators ', this.validators)
+            if(typeof validCheck === 'string') {
+                input.style.backgroundColor = 'firebrick'
+                input.style.color = 'white'
+                err.innerText = validCheck
+                this.validators.isValid[key] = validCheck
+
+            } else if(typeof validCheck === 'boolean' && validCheck === true) {
+                input.style.backgroundColor = 'transparent'
+                input.style.color = 'black'
+                err.innerText = ''
+                this.validators.isValid[key] = validCheck
+            }
+
+            console.log(Object.keys(this.validators.isValid))
+            console.log(Object.values(this.validators.isValid))
+            console.log(Object.values(this.validators.isValid).every((item) => item === true))
+            if(Object.values(this.validators.isValid).every((item) => item === true)) {
+                okButton.disabled = false
+            } else {
+                okButton.disabled = true
+            }
+        } catch(e){console.warn('whoopsie', e)}
+    }
+
     let inputCreators = {
         string: (key, value, func ) => {
             let wrap = document.createElement('div')
-
-            let input = document.createElement('input')
-            input.type = 'text'
-            input.style.display = 'block'
-            input.placeholder = key
-            input.value = value
-
+            let input
             let small = document.createElement('small')
             small.style.color = 'red'
             small.innerText = ''
-            
-            wrap.append(input, small)
 
-            input.oninput  = () => {
+            if(/^[*]+$/.test(data[key])) {
+                let div = document.createElement('div')
+                input = new Password(div, true)
+                input.getHTMLElements().Password_input.value = ''
+                wrap.append(input.getHTMLElements().Password_wrapper, small)
+
+                input.getHTMLElements().Password_input.oninput = (e) => {
+                    func(input.getHTMLElements().Password_input.value)
+                    checkInfo(input.getHTMLElements().Password_input.value, key, {}, input.getHTMLElements().Password_input, small)
+                }
+                func(input.getHTMLElements().Password_input.value)
+                checkInfo(input.getHTMLElements().Password_input.value, key, {}, input.getHTMLElements().Password_input, small)
+            } else {
+                input = document.createElement('input')
+                input.type = 'text'
+                input.style.display = 'block'
+                input.placeholder = key
+                input.value = value
+                wrap.append(input, small)
+
+                input.oninput  = () => {
+                    func(input.value)
+                    checkInfo(input.value, key, {}, input, small)
+                }
                 func(input.value)
-
-                try {
-                    let validCheck = this.validators[key](input.value, key, this.data, input)
-                    if(typeof validCheck === 'string') {
-                        small.innerText = validCheck
-                    } else if(typeof validCheck === 'boolean') {
-                        small.innerText = ''
-                    }
-                } catch(e){console.warn(`no validator for ${key} property`)}
+                checkInfo(input.value, key, {}, input, small)
             }
+            
             return wrap
         },
 
         boolean: (key, value, func) => {
+            let wrap = document.createElement('div')
+
             let input = document.createElement('input')
             input.type = 'checkbox'
             input.placeholder = key
             input.checked = value
-            input.onchange  = () => {
-                func(input.value)
-                try {
-                    if(this.validators[key]) {
-                        this.validators[key](input.value, key, this.data, input)
-                    }
-                } catch(e){console.warn(`no validator for ${key} property`)}
+
+            let small = document.createElement('small')
+            small.style.color = 'red'
+            small.innerText = ''
+
+            wrap.append(input, small)
+
+            input.onchange  = (e) => {
+                func(input.checked)
+                checkInfo(input.checked, key, {}, input, small)
             }
-            return input
+            func(input.checked)
+            checkInfo(input.checked, key, {}, input, small)
+            return wrap
         },
 
         date: (key, value, func) => {
@@ -356,15 +422,10 @@ function Form(el, data, okCallback, cancelCallback){
 
             input.onchange  = () => {
                 func(new Date(input.value))
-                try {
-                    let validCheck = this.validators[key](input.value, key, this.data, input)
-                    if(typeof validCheck === 'string') {
-                        small.innerText = validCheck
-                    } else if(typeof validCheck === 'boolean') {
-                        small.innerText = ''
-                    }
-                } catch(e){console.warn(`no validator for ${key} property`)}
+                checkInfo(input.value, key, {}, input, small)
             }
+            func(new Date(input.value))
+            checkInfo(input.value, key, {}, input, small)
             return wrap
         },
     }
@@ -379,7 +440,7 @@ function Form(el, data, okCallback, cancelCallback){
             data[key] = value 
         })
 
-        tdKey.innerText = key
+        tdKey.innerHTML = key[0] ==='*'? `<span><span style="color: red;">*&nbsp</span>${key.substring(1)}</span>`:`<span>${key}</span>`
 
         tdInput.append(input)
         tr.append(tdKey, tdInput)
@@ -391,7 +452,7 @@ function Form(el, data, okCallback, cancelCallback){
     this.cancelCallback = cancelCallback
 
     this.data           = data
-    this.validators     = {}
+    this.validators     = {isValid:{}}
 }
 
 
@@ -400,10 +461,11 @@ formContainer.id = 'formContainer'
 document.body.append(formContainer)
 
 let form = new Form(formContainer, {
-    name: 'Anakin',
+    "*name": 'Anakin',
     surname: 'Skywalker',
-    married: true,
-    birthday: new Date((new Date).getTime() - 86400000 * 30*365)
+    "*married": true,
+    birthday: new Date((new Date).getTime() - 86400000 * 30*365),
+    "*password": '**'
 }, () => console.log('ok'),() => console.log('cancel') )
 form.okCallback = () => console.log('ok2')
 
@@ -413,6 +475,14 @@ form.validators.surname = (value, key, data, input) => value !== '' && value.len
 
 form.validators.name = form.validators.surname
 
+form.validators.mandatoryErr = (value, key, data, input) => {
+    if(typeof value === 'boolean') {
+        return value === true? value : `${key} is mandatory`
+    } else {
+        return value.length > 0 && value !== ''? true : `${key} is mandatory`
+    }
+}
+
 form.validators.birthday = (value, key, data, input) => {
     let today = new Date()
     let given = new Date(value)
@@ -422,7 +492,7 @@ form.validators.birthday = (value, key, data, input) => {
     today.setHours(0,0,0,0)
     given.setHours(0,0,0,0)
 
-    if(given >= today || given < lowest) {
+    if(given >= today || given < lowest || value === '') {
         return `Wrong ${key}`
     }else {
         return true