Простая форма проверки с javascript

у меня есть тег "div" с сообщением об ошибке в моей форме. этот тег отображается при нажатии кнопки, а входные данные равны нулю. мой код работает, но тег «div» быстро скрывается.

<htlm>
<head>
</head>
<body>
<div id = "ShowError">
<h3>Username Or Password is incorrect.</h3>
</div>
<form id = "Main" method = "POST">
<input id = "User" type = "text" name = "Name" placeholder = "Enter Your Username">
<br>
<input id = "Pass" type = "password" name = "Pass" placeholder = "Enter Your Password"/>
<br>
<button id = "bt">Login</button>
<button >Cancel</button>
</form>
</body>
<script src = ""></script>
</html>

div#ShowError{
opacity:0.0;
}

var btn = document.getElementById("bt");
btn.addEventListener("click",func);

var Username = document.getElementById("User");
var Password = document.getElementById("Pass");

function func()
{

    if (Username.value == "" || Password.value == "")
    {
        document.getElementById("ShowError").style.opacity = "1.0";
    }
}

Атрибут-заполнитель HTML5 не заменяет элемент метки.

— 29.05.2019 16:00

var Username — Имена переменных, начинающиеся с заглавной буквы, традиционно зарезервированы для функций-конструкторов в JavaScript. Не используйте их для других видов ценности.

— 29.05.2019 16:00

Вы должны запустить свой HTML через валидатор.

— 29.05.2019 16:01

btn.addEventListener("click",func); — В общем, лучше использовать событие отправки формы, а не событие клика кнопки отправки.

— 29.05.2019 16:02

javascript validation

29.05.2019 15:58

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Нажав кнопку отправки, вы отправите форму.

Итак, JavaScript запускается, форма отправляется и загружается новая страница. JavaScript не запущен на новой странице.

Предотвратить поведение по умолчанию события, если вы не хотите, чтобы форма отправлялась.

function func(e)
{

    if (Username.value == "" || Password.value == "")
    {
        e.preventDefault();
        document.getElementById("ShowError").style.opacity = "1.0";
    }
}

Классика не умирает :-)

— 29.05.2019 16:01

29.05.2019 16:00

Ответ принят как подходящий

Если я вас правильно понял, вы хотите замедлить изменение непрозрачности сообщения об ошибке проверки. Например, медленно меняйте непрозрачность с 0.0 на 1.0, верно? Если это так, для медленного изменения непрозрачности сообщения об ошибке проверки вы должны добавить свойство css переход с помощью javascript в свой div сообщения об ошибке проверки.

function func(event)
{

    if (Username.value == "" || Password.value == "")
    {

        document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 1;
    }
}

а также, чтобы остановить перезагрузку страницы при нажатии кнопки входа, вы можете включить type="button" в кнопку входа

<button type = "button" id = "bt">Login</button>

Рабочая демонстрация:

var btn = document.getElementById("bt");
btn.addEventListener("click",func);
//document.getElementById("ShowError").style.transition = "all 2s"
var Username = document.getElementById("User");
var Password = document.getElementById("Pass");

Username.addEventListener("input",func2)
Password.addEventListener("input",func2)

function func(event)
{

    if (Username.value == "" || Password.value == "")
    {

        document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 1;
    }
}

function func2(){
  if (Username.value !== "" && Password.value !== ""){
            document.getElementById("ShowError").style.transition = "all 2s"
        document.getElementById("ShowError").style.opacity = 0;
  }
}

div#ShowError{
opacity:0.0;
}

<div id = "ShowError">
<h3>Username Or Password is incorrect.</h3>
</div>
<form id = "Main" method = "POST">
<input id = "User" type = "text" name = "Name" placeholder = "Enter Your Username">
<br>
<input id = "Pass" type = "password" name = "Pass" placeholder = "Enter Your Password"/>
<br>
<button type = "button" id = "bt">Login</button>
<button >Cancel</button>
</form>

Спасибо... но если ввод заполнен, сообщение об ошибке не скрывается в форме

— 31.05.2019 12:25

@hamid Вам нужно отслеживать, есть ли какие-либо изменения во входном значении для достижения этой функциональности. Добавьте eventListener в оба поля ввода. Проверьте обновленный ответ

— 31.05.2019 16:04

29.05.2019 16:26