Почему заданный класс в условие с помощью js - удаляется?

242
11 февраля 2020, 23:20

Summary:

Хочется создать самописную форму, которая проверяет корректность ввода пользователем, то есть, заполнил ли пользователь поле или нет, в случае одного пустого поле, пользователю input подсветится красной рамкой

Task: В исходнике есть некое условие, которое проверяет с помощью arrInput[i].value.length == 0, но проблема в том , что когда кликаю по кнопке отправить, класс заданный arrInput[i].classList.add("form__item"); в момент исчезает . Пришлось останавливать скрипт через alert();

Source:

let name = document.querySelector('form input[name=name]'); 
let lastName = document.querySelector('form input[name=lastName]'); 
let age = document.querySelector('form input[name=age]'); 
let send = document.querySelector('form input[type=submit]'); 
 
 
let arrInput = [name, lastName, age]; 
 
 
send.addEventListener('click', checkOut); 
 
function checkOut() { 
 
    for (let i=0 ;arrInput.length > i; i++ ){ 
 
        if (arrInput[i].value.length == 0){ 
 
            arrInput[i].classList.add("form__item"); 
            alert(1); 
        } 
    } 
 
}
.form .form__item.input[type=text] { 
    border: 1px solid red; 
}
<form class="form" action=""> 
 
    <input type="text" name="name"><br> 
    <input type="text" name="lastName"><br> 
    <input type="text" name="age"><br> 
    <input type="submit" value="send"> 
</form>

Answer 1

Нужно оказывается добавить в условие event.preventDefault()

send.addEventListener('click', checkOut);
function checkOut() {
    for (let i=0 ;arrInput.length > i; i++ ){
        if (arrInput[i].value.length == 0){
            arrInput[i].classList.add("form__item");
            event.preventDefault();
        }
    }
}
READ ALSO
Вебсокеты и bitfinex
javascript

Вебсокеты и bitfinex

Хочу использовать вебсокеты для получения курса валют с биржи битфинексНо в браузере получаю ошибку

 261
Фиксированная сетка в chartist.js
javascript

Фиксированная сетка в chartist.js

Фиксированную сетку задаю вот так:

 257
Загрузка файла без клика ajax
javascript

Загрузка файла без клика ajax

Есть js скрипт который загружает выбранный файл по клику на #uploadImage

 253
выезжающее меню справа на чистом CSS
CSS

выезжающее меню справа на чистом CSS

У меня краткий вопрос, почему когда боковое меню слева выезжает по нажатию на гамбургер нормально, но когда, меню справа, то при нажатии на гамбургер...

 268