Задать вопрос
@Damruss

Как сделать валидацию поля ввода без фреймворков?

Добрый день! Подскажите как сделать валидацию поля ввода таким образом: При вводе некорректных данных изменять границу поля ввода на красный цвет, при начале ввода после ошибки изменять цвет поля ввода на исходный (Некорректным считать пустое поле и поле состоящее только из пробелов) ?
Хотел сделать через отдельную функцию проверки наличия свойства у поля 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">&#9660;</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;
}
  • Вопрос задан
  • 225 просмотров
Подписаться 2 Оценить 2 комментария
Пригласить эксперта
Ответы на вопрос 1
@Ooos
Front-End
Каких фреймворков, есть куча плагинов для валидации. https://github.com/chriso/validator.js

p.s У вас очень много кода, читать это нет особого желания. В чем конкретно проблема?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы