JSFiddle - React, Tailwind, and code Playground

by Amresh Venugopal

HTML

<input type="text" id='name' placeholder='enter name'  id='name'>
<ul id='ulname'></ul>
<input type="text" id='phone' placeholder='enter phone number' id='phone'>
<ul id='ulphone'></ul>
<input type="text" id='email' placeholder='enter email' id='email'>
<ul id='ulemail'></ul>
<pre id='namePre'></pre>
<pre id='phonePre'></pre>
<pre id='emailPre'></pre>

CSS

input {
  display: block;
  margin: 5px 0;
}

input.error {
  border: 1px solid red;
}

input:focus {
  outline: none;
}

JavaScript

function checkUndefined (input) {
	return (!input) ? true : false
}

function checkLength (min, max, input) {
	return (input.length > max) || (input.length < min)
}

function checkFormat (format, input) {
  console.log(format, input, format.test(input))
	return format.test(input)
}

function checkErrors (obj) {
	for (let err in obj) {
  	if(obj[err]) {
    	return true
    }
  }
  return false
}

function showMessage (key, errors) {
	let ul = ulMap[key]
  let list = Object.keys(errors).map(errorKey => {
    if (errors[errorKey]) {
      let li = document.createElement('li')
      li.innerHTML = errorKey
      return li
    }
  })
  ul.innerHTML = ''
  list.forEach(li => {
  	if (li) {
	    ul.appendChild(li)    
    }
  })
}

let nameErrors = {
	"undefined": checkUndefined,
  "length": checkLength.bind(null, 0, 30),
  "format": checkFormat.bind(null, /[^a-zA-Z]/g)
}

let phoneNumberErrors = {
	"undefined": checkUndefined,
  "length": checkLength.bind(null, 10, 13),
  "format": checkFormat.bind(null, /[^0-9]/g)
}

let emailErrors = {
	"undefined": checkUndefined,
  "length": checkLength.bind(null, 6, 13),
  "format": checkFormat.bind(null, /([A-Za-z0-9_\-.])+@([A-Za-z0-9_\-.])+\.([A-Za-z]{2,4})$/)
}

let [nameInput, phoneInput, emailInput] = [document.getElementById('name'), document.getElementById('phone'), document.getElementById('email')]
let inputs = [nameInput, phoneInput, emailInput]

let preMap = {
	name: document.getElementById('namePre'),
  phone: document.getElementById('phonePre'),
  email: document.getElementById('emailPre')
}

let functionMap = {
	name: nameErrors,
  phone: phoneNumberErrors,
  email: emailErrors
}

let ulMap = {
	name: document.getElementById("ulname"),
  phone: document.getElementById("ulphone"),
  email: document.getElementById("ulemail")
}

inputs.forEach((input) => {
	(function (input) {
		input.addEventListener('keyup', (e) => {
      let value = e.target.value
      let result = {}
      result[input.id] = {}
      for(let...