Добрый день! Подскажите как сделать валидацию поля ввода таким образом: При вводе некорректных данных изменять границу поля ввода на красный цвет, при начале ввода после ошибки изменять цвет поля ввода на исходный (Некорректным считать пустое поле и поле состоящее только из пробелов) ?
Хотел сделать через отдельную функцию проверки наличия свойства у поля invalid, но тогда в input нет возможности вводить данные.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<p>Home</p>
<div class="triangle">▼</div>
<div class="menu" id="menu1">
<button class='button' id='btn_show-menu'>Show menu</button>
<ul id='list'>
</ul>
</div>
<p>Edit Home</p>
<input id="inp_ChangeName" data-title-number="" type="text" value="Enter the home name">
<div id="input-changes">
<button class='button btn_save'>Save</button>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
var homeName = ["Home-1", "Home-2", "Home-3", "Home-4"];
console.log(homeName);
function homeNameTitle() {
for (var i = 0; i < homeName.length; i++) {
var newTi = document.createElement('li');
newTi.innerHTML = homeName[i];
newTi.classList.add("title");
newTi.classList.add("title" + "-" + i);
list.appendChild(newTi);
}
}
homeNameTitle();
function Menu(options) {
var elem = options.elem;
elem.onmousedown = function() {
return false;
}
elem.onclick = function(event) {
if (event.target.closest('#btn_show-menu')) {
elem.classList.toggle('open');
}
if (event.target.closest('.title')) {
document.getElementById("inp_ChangeName").value = event.target.innerHTML;
document.getElementById("inp_ChangeName").dataset.titleNumber = event.target.classList[1];
document.getElementById("menu1").classList.toggle('open');
document.getElementById("btn_show-menu").innerHTML = event.target.innerHTML;
}
}
}
var menu = new Menu({
elem: document.getElementById('menu1')
});
function SaveButton(options) {
var elem = options.elem;
elem.onmousedown = function() {
return false;
};
elem.onclick = function(event) {
if (event.target.closest('.btn_save')) {
var newTi = document.createElement('li');
newTi.innerHTML = document.getElementById("inp_ChangeName").value;
newTi.classList.add("title");
newTi.classList.add(document.getElementById("inp_ChangeName").dataset.titleNumber);
document.getElementById("btn_show-menu").innerHTML = document.getElementById("inp_ChangeName").value;
if (document.getElementById("inp_ChangeName").value==="") {
document.getElementById("inp_ChangeName").classList.toggle('invalid');
};
for (var i = 0; i < list.children.length; i++) {
if ('title'+'-'+i === document.getElementById("inp_ChangeName").dataset.titleNumber) {
var title = list.children[i];
list.replaceChild(newTi, title);
};
};
};
};
};
function ToValidate(options) {
var elem = options.elem;
elem.onmousedown = function() {
return false;
}
elem.onclick = function(event) {
if (event.target.closest('#inp_ChangeName')) {
event.target.classList.remove('invalid');
};
};
};
var saveButton = new SaveButton({
elem: document.getElementById('input-changes')
});
// var toValidate = new ToValidate({
// elem: document.getElementById('inp_ChangeName')
// });
body {
font-family: 'OpenSansRegular', sans-serif;
background-color: #f8f8f8;
}
.main {
margin: 5% 0 52px 5%;
}
.main p {
font-family: 'OpenSansBold', sans-serif;
background-color: #f8f8f8;
font-size: 28px;
margin: 0 0 1% 0;
}
.menu {
margin-bottom: 27px;
}
.menu ul {
display: none;
height: 159px;
width: 172px;
background-color: #f8f8f8;
position: absolute;
border-style: solid;
border-width: 1px;
border-color: #a9a9a9;
top: 133px;
}
.menu.open ul {
display: block;
}
.menu.open li {
margin-top: 16px;
list-style-type: none;
position: relative;
left: -31px;
cursor: pointer;
}
.triangle {
position: absolute;
font-size: 11px;
margin: 12px 0 0 192px;
}
#btn_show-menu {
display: block;
width: 214px;
height: 34px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #a9a9a9;
cursor: pointer;
}
.btn_save {
width: 53px;
height: 39px;
background-color: white;
border-style: solid;
border-width: 1px;
border-color: #a9a9a9;
position: relative;
right: 6px;
cursor: pointer;
}
#input-changes {
display: inline-block;
}
#inp_ChangeName {
display: inline-block;
width: 462px;
height: 33px;
padding-left: 1%;
border-style: solid;
border-width: 2px;
}
.invalid {
border-color: #f82e2e;
}
