простая форма проверки с помощью JavaScript - PullRequest
Новая
       2

простая форма проверки с помощью JavaScript

1 голос
/ 29 мая 2019

У меня есть тег '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";
    }
}

Ответы [ 2 ]

4 голосов
/ 29 мая 2019

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

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

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

function func(e)
{

    if(Username.value == "" || Password.value == "")
    {
        e.preventDefault();
        document.getElementById("ShowError").style.opacity = "1.0";
    }
}
0 голосов
/ 29 мая 2019

Если я вас правильно понимаю, вы хотите замедлить изменение непрозрачности сообщения об ошибке проверки. Например, медленно меняйте непрозрачность от 0,0 до 1,0, верно? Если это так, для медленного изменения непрозрачности сообщения об ошибке проверки необходимо добавить свойство css transition , используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...