Регистрационная форма не отображает сообщения об ошибках проверки для полей ввода ⇐ CSS

[Anonymous]

Я строю форму регистрации пользователя с использованием HTML, CSS и Javascript, с помощью аутентификации Firebase обрабатывает регистрацию. Это довольно часто встречается со многими регистрационными формами. < /P>
Я ожидал, что встроенные сообщения об ошибках, такие как «неверный формат электронной почты» или «Пароли не совпадают»), чтобы отображаться в полях формы, когда проверка сбой. По какой -то причине это не отображается и не дает этой подсказки. Это как будто JS не запускается, чтобы показать, что. < /P>


const form = document.getElementById('register-form');
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const repeatPasswordInput = document.getElementById('repeat-password');

function resetErrors() {
[emailInput, passwordInput, repeatPasswordInput].forEach(input => {
input.classList.remove('error');
document.getElementById(`${input.id}-error`).classList.remove('show');
});
}

function validateInputs() {
let hasError = false;
resetErrors();

if (!emailInput.value.includes('@') || !emailInput.value.includes('.')) {
emailInput.classList.add('error');
document.getElementById('email-error').classList.add('show');
hasError = true;
}

if (passwordInput.value.length < 6 || passwordInput.value.length > 32) {
passwordInput.classList.add('error');
document.getElementById('password-error').classList.add('show');
hasError = true;
}

if (passwordInput.value !== repeatPasswordInput.value) {
repeatPasswordInput.classList.add('error');
document.getElementById('repeat-password-error').classList.add('show');
hasError = true;
}

return !hasError;
}

form.addEventListener('submit', (e) => {
e.preventDefault();
if (!validateInputs()) {
alert('Please fix the highlighted fields.');
} else {
alert('Form submitted!');
form.reset();
resetErrors();
}
});< /code>
.register-container {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 4rem;
padding: 5rem 2rem;
max-width: 1100px;
margin: 0 auto;
flex-wrap: wrap;
}

#register-form {
flex: 1;
max-width: 400px;
background-color: #fcfcfc;
padding: 2rem 2.5rem;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(122, 132, 80, 0.2);
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
box-sizing: border-box;
}

#register-form label {
display: block;
margin-bottom: 0.3rem;
font-weight: 600;
color: #4b5221;
}

#register-form input {
width: 100%;
padding: 0.6rem 0.8rem;
margin-bottom: 1rem;
border: 1.5px solid #c8ceaa;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.3s ease;
}

#register-form input:focus {
border-color: #7a8450;
outline: none;
}

#submit {
width: 100%;
background-color: #7a8450;
border: none;
color: white;
font-weight: 700;
padding: 0.75rem;
border-radius: 25px;
font-size: 1.1rem;
cursor: pointer;
transition: background-color 0.3s ease;
}

.form {
text-align: center;
margin-top: 1.5rem;
font-size: 0.95rem;
color: #555;
}

.form a {
color: #7a8450;
font-weight: 600;
text-decoration: none;
}

.form a:hover {
text-decoration: underline;
}

.register-tip {
font-size: 0.8rem;
color: #7a8450;
font-style: italic;
margin-top: 0rem;
margin-bottom: 1rem;
}

input.error {
border: 2px solid red;
background-color: #ffe6e6;
}

.error-message {
color: red;
font-size: 0.8rem;
margin-top: 0rem;
margin-bottom: 0.2rem;
display: none;
}

#register-form .error-message.show {
display: block;
}

@media screen and (max-width: 768px) {
.register-container {
padding: 2rem 1rem;
}

#register-form,
.register-info {
max-width: 100%;
}
}< /code>

Email

Please enter a valid email

Password

Password too short

Repeat Password

Passwords do not match

Register
< /code>
< /div>
< /div>
< /p>

• Я добавил консоли. Дисплеи должны быть правильными.

Подробнее здесь: https://stackoverflow.com/questions/797 ... put-fields