Написал валидацию формы, теперь не могу придумать, как сделать красную рамку input-y в котором ошибка, что бы при исчезновении ошибки рамка убиралась.
let arg = true;
window.addEventListener('DOMContentLoaded', function(){
let errors =[]
function error(errNames,text,form){
let el;
/*Чекаем, передали мы атрибут name или id,в зависимости от этого присваеваем переменной el следуюшего соседа
для последующего insertBefore*/
if(elements[errNames]){
el = elements[errNames].nextSibling;
} else {
el = errNames.nextSibling;
}
//ставим переменную arg в false, чтобы форма не отправлялась ,когда есть ошибки
arg =false;
errorTag = document.createElement('A')
errorTag.innerHTML = `${text}`;
errorTag.className = 'error'
form.insertBefore(errorTag,el);
/*Добавляем в массив errors созданный элемент, в котором содержится
текст ошибки, дабы потом можно было его удалить, если
поле пройдет валидацию
*/
errors.push(errorTag);
}
function validate(form){
elements = form.elements;
if(!elements.name.value){
error('name', ' Не ввели имя',form);
}
if(!elements.surname.value){
error('surname', ' Не ввели фамилию',form);
}
if(!elements.s1.checked && !elements.s2.checked && !elements.s3.checked){
error(poezd, ' Не выбраны поезда',form);
}
}
submit.onclick = function(){
/*Если массив с созданными элементами, в которых содержится текст ошибок не пуст, то удаляем предыдущие ошибки с
страницы, дабы вставить новые, если они появились или удалить старые, если бы исправлены*/
if(errors.length > 0){
for(let i = 0; i < errors.length; i++){
errors[i].parentNode.removeChild(errors[i]);
}
errors = []
}
//Если массив с ошибками пуст, присваеваем переменной arg true, дабы отправить форму.
validate(document.forms[0])
if(errors.length == 0){
arg = true;
}
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
<script type="text/jscript" src="script.js"></script>
<title>Document</title>
</head>
<body>
<main>
<div class="middle">
<div class="tt">
<form action="" onsubmit="return arg">
<p>Работник ЖД</p>
<label for="name">Имя</label><br>
<input type="text" name="name" id="name"><br>
<br><label for="name">Фамилия</label><br>
<input type="text" name="surname" id="surname"><br>
<br><label for="hob">Должность:</label><br>
<select name="hobbie">
<option value="Машинист">Машинист</option>
<option value="Проводник">Проводник</option>
<option value="Контролер">Контролер</option>
</select><br>
<br> <label for="skill" id="poezd">Поезда:</label><br>
<label for="s1">112
<input type="checkbox" name="s1" id="s1" value="111"></label><br>
<label for="s2">113
<input type="checkbox" name="s2" value="113" id="s2">
<br></label>
<label for="s3">114 <input type="checkbox" name="s3" value="114" id="s3">
</label><br>
<br><label>Смена:</label><br>
<label for="first"> Первая</label>
<input type="radio" name="time" id="first" value="Мужской">
<label for="sec"> Вторая</label>
<input type="radio" name="time" id="sec" value="Женский"><br><br>
<label for="about">О себе:</label><br>
<textarea name="" id="about" cols="30" rows="10">lel</textarea><br>
<input type="submit" name="submit" id="submit" class="btn" value="Go" >
</form>
<!-- <button name="submit" id="submit" class="btn">Войти</button> -->
</div>
</div>
</main>
</body>
</html>
Простой
