error messages display functionality added

hw9/script.js

@@ -294,19 +294,33 @@ function Form(el, data, okCallback, cancelCallback){
 
     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 small = document.createElement('small')
+            small.style.color = 'red'
+            small.innerText = ''
+            
+            wrap.append(input, small)
+
             input.oninput  = () => {
                 func(input.value)
+
                 try {
-                    if(this.validators[key]) {
-                        this.validators[key](input.value, key, this.data, input)
+                    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`)}
             }
-            return input
+            return wrap
         },
 
         boolean: (key, value, func) => {
@@ -326,20 +340,32 @@ function Form(el, data, okCallback, cancelCallback){
         },
 
         date: (key, value, func) => {
+            let wrap = document.createElement('div')
+
             let input = document.createElement('input')
             input.type = 'datetime-local'
+            input.style.display = 'block'
             input.placeholder = key
             input.value = new Date(value).toISOString().slice(0, -1)
-            console.log('inp val', input.value)
+            
+            let small = document.createElement('small')
+            small.style.color = 'red'
+            small.innerText = ''
+            
+            wrap.append(input, small)
+
             input.onchange  = () => {
                 func(new Date(input.value))
                 try {
-                    if(this.validators[key]) {
-                        this.validators[key](input.value, key, this.data, input)
+                    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`)}
             }
-            return input
+            return wrap
         },
     }
 
@@ -381,8 +407,26 @@ let form = new Form(formContainer, {
 }, () => console.log('ok'),() => console.log('cancel') )
 form.okCallback = () => console.log('ok2')
 
-form.validators.surname = (value, key, data, input) => value.length > 2 && 
+form.validators.surname = (value, key, data, input) => value !== '' && value.length > 2 && 
                                                     value[0].toUpperCase() == value[0] && 
-                                                    !value.includes(' ') ? true : 'Wrong name'
+                                                    !/[0-9 \W]/.test(value) ? true : `Wrong ${key}`
+
+form.validators.name = form.validators.surname
+
+form.validators.birthday = (value, key, data, input) => {
+    let today = new Date()
+    let given = new Date(value)
+    let lowest = new Date()
+    lowest.setFullYear(1900)
+    lowest.setHours(0,0,0,0)
+    today.setHours(0,0,0,0)
+    given.setHours(0,0,0,0)
+
+    if(given >= today || given < lowest) {
+        return `Wrong ${key}`
+    }else {
+        return true
+    }
+}
 
 console.log(form)