@danyvasnafig

Как input при ошибке валидации сделать красную рамку?

Написал валидацию формы, теперь не могу придумать, как сделать красную рамку 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>
  • Вопрос задан
  • 1867 просмотров
Пригласить эксперта
Ответы на вопрос 1
Xuxicheta
@Xuxicheta
инженер
посмотрите на такой простой вариант валидации с помощью data аттрибутов
https://jsfiddle.net/melchiorio/majv94pe/3/
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы