Форма для проверки и открыть ссылку на той же странице - PullRequest
Новая
       7

Форма для проверки и открыть ссылку на той же странице

0 голосов
/ 12 января 2020

Здесь я использую HTML и javascript, пожалуйста, go, не хочу менять весь мой код, а просто посмотрите. существует файл HTML и файл javascript. оба связаны. в форме я беру имя пользователя и пароль и проверяю или проверяю их, если они верны, я позволю пользователю go перейти на следующую страницу или остановлю его там. 

<!DOCTYPE html>
<html>
<head>
    <title>LOGIN</title>

    <style type="text/css">
        #error{
            color:red;
            font-style: italic;
        }
        #success{
            color:green;
            font-style:italic;
        }
    </style>
</head>
<body>
<form method="post" onsubmit = "return(validateForm());">
    Enter username : <input id='username' type='text' required>
    Enter password : <input id='password' type='password' required>
    <p id="error"></p>
    <p id="sucess"></p>
    <input type = "submit" value = "Login" />

</form>
</body>
<script type='text/javascript' src="functions.js"></script>
</html>



var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

function validateForm(){
    if (username == 'username' && password == 'password'){
        document.getElementById('sucess').innerHTML = 'sucessful login';
        return true;

    }
    else{
        document.getElementById('error').innerHTML = 'invalid credentials';

        return false;

    }

}

function welcomeuser(){
        document.getElementById('welcomemsg').innerHTML('Welcome ' +username);
    }

Ответы [ 2 ]

0 голосов
/ 12 января 2020

Поскольку вы отправляете форму (используя type=submit), ваша форма пропускает проверку javascript. Быстрое решение состоит в том, чтобы изменить: 

<input type = "submit" value = "Login" />

Кому: 

<input type = "button" value = "Login" />

И вам это не нужно: onsubmit = "return(validateForm());" просто вызовите функцию onclick или с прослушивателем событий

Конечно, вам нужно получить значения из функции, чтобы проверить ее, а затем, после проверки правильности введенных данных: 

if (username == 'username' && password == 'password'){

Чтобы сделать все, что вы хотите (либо перенаправить пользователя фактически отправляя форму, используя submit() метод).

Я немного изменяю ваш код, и это должно работать: 

document.querySelector('#submit').addEventListener('click', validateForm);

function validateForm(){
  var username = document.querySelector('#username').value;
  var password = document.querySelector('#password').value;
  if (username === 'username' && password === 'password') {
    document.querySelector('#sucess').textContent = 'sucessful login';
    // redirect or submit 
  }
  else {
    document.querySelector('#error').textContent = 'invalid credentials';    
  }
}
#error{color:red; font-style: italic; }
#success{ color:green; font-style:italic; }
<form method="post">
    Enter username : <input id='username' type='text' required>
    Enter password : <input id='password' type='password' required>
    <p id="error"></p>
    <p id="sucess"></p>
    <button id="submit" type="button">Login</button>
</form>
0 голосов
/ 12 января 2020

Пожалуйста, попробуйте следующее решение

функции. js код, как показано ниже 

function validateForm(){
    var username = document.getElementById('username').value;
    var password = document.getElementById('password').value;
    if (username == 'username' && password == 'password'){
        document.getElementById('sucess').innerHTML = 'sucessful login';
        // redirect code in page
        // window.location.href = 'thankyou.html'
        return false;
    } else {
        document.getElementById('error').innerHTML = 'invalid credentials';
        return false;
    }
}

Ваш HTML код, как показано ниже 

<!DOCTYPE html>
<html>
<head>
    <title>LOGIN</title>

    <style type="text/css">
        #error{
            color:red;
            font-style: italic;
        }
        #success{
            color:green;
            font-style:italic;
        }
    </style>
<script type='text/javascript' src="functions.js"></script>
</head>
<body>
<form method="post" onsubmit="return validateForm();">
    Enter username : <input id='username' type='text'>
    Enter password : <input id='password' type='password'>
    <p id="error"></p>
    <p id="sucess"></p>
    <input type = "submit" value = "Login" />

</form>
</body>
</html>
...