Как убрать перезагрузку страницы, по нажатию на button?

Question

Всем привет! У меня есть маленькая форма для входа на страницу.

<section class="section">
        <div class="auth">
            <div class="auth-header">
                <img src="assets/logo_vk.png" alt="" class="logo">
                <h1>Вход</h1>
                <a href="registration.html" class="registration">Регистрация</a>
            </div>
            <div class="auth-main">
                <form action="">
                    <label><input name="login" type="text" class="login" placeholder="Телефон или email" autocomplete="off"></label>
                    <label><input name="password" type="password" class="password" placeholder="Пароль" autocomplete="off"></label>
                    <button class="auth-button">Войти</button>
                    <div class="password-forgot-block">
                        <a href="#" class="password-forgot">Забыли пароль?</a>
                    </div>
                </form>
            </div>
        </div>
</section>

И я хочу добавить такой скрипт. Если input-ы пустые, то сделать background данного инпута красным цветом.

.background-color {
    background-color: #faebd7;
} 

let login = document.querySelector('.login');
let password = document.querySelector('.password');
let btnLogin = document.querySelector('.auth-button');


btnLogin.addEventListener('click', function () {
    if (login.value === '' && password.value === '') {
        login.classList.add('background-color');
        password.classList.add('background-color');
    } else if (login.value === '' && password.value !== '') {
        login.classList.add('background-color');
    } else if (login.value !== '' && password.value === '') {
        password.classList.add('background-color');
    }
});

Но возникает странная ошибка или не знаю что, вообщем если я заполняю одно поле и хочу проверить другие условия, когда я нажимаю на button, страница перезагружается. Все инпуты обнуляются. Почему так происходит не понятно. Есть кто разбирается, как это можно решить?

Answer 1

Дело в том, что при нажатии активного элемента(ссылка, кнопки отправки формы) выполняется действие элемента по умолчанию. Чтобы этого не происходило, надо это действие предотвращать, например, с помощью preventDefault().

btnLogin.addEventListener('click', function (e) {//e - событие элемента по умолчанию
    login.classList.remove('background-color');
    password.classList.remove('background-color');
    if (login.value === '') {
        login.classList.add('background-color');
        e.preventDefault();
    } else if (password.value === '') {
        password.classList.add('background-color');
        e.preventDefault();
    }
});

Answer 2

    let login = document.querySelector('.login');
    let password = document.querySelector('.password');
    let btnLogin = document.querySelector('.auth-button');

    btnLogin.addEventListener('click', function () {
        event.preventDefault(); // Убираем событие отправки формы
        if (login.value === '' && password.value === '') {
            login.classList.add('background-color');
            password.classList.add('background-color');
        } else if (login.value === '' && password.value !== '') {
            login.classList.add('background-color');
        } else if (login.value !== '' && password.value === '') {
            password.classList.add('background-color');
        } else {
            // Вызываете обработчик формы
            document.getElementById('fform').submit();
        }
    });

    .background-color {
        background-color: #faebd7;
    }

<section class="section">
    <div class="auth">
        <div class="auth-header">
            <img src="assets/logo_vk.png" alt="" class="logo">
            <h1>Вход</h1>
            <a href="registration.html" class="registration">Регистрация</a>
        </div>
        <div class="auth-main">
            <form id="fform" action="">
                <label><input name="login" type="text" class="login" placeholder="Телефон или email" autocomplete="off"></label>
                <label><input name="password" type="password" class="password" placeholder="Пароль" autocomplete="off"></label>
                <button class="auth-button">Войти</button>
                <div class="password-forgot-block">
                    <a href="#" class="password-forgot">Забыли пароль?</a>
                </div>
            </form>
        </div>
    </div>
</section>

Answer 3

Есть вариант переписать JS-функцию так:

btnLogin.onclick = function () {
	if (login.value === '' && password.value === '') {
		login.classList.add('background-color');
		password.classList.add('background-color');
		return false;
	} else if (login.value === '' && password.value !== '') {
		login.classList.add('background-color');
		return false;
	} else if (login.value !== '' && password.value === '') {
		password.classList.add('background-color');
		return false;
    }
}

Answer 4

Почитай что такое preventDefaul В нем кроется ответ на твой недуг

https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault

Answer 5

<form onsubmit="return false">
</form>

БЛОГ НА HUSL

Как убрать перезагрузку страницы, по нажатию на button?

Ответы (5 шт):