i'm trying to make a verification, when the user click on the button Entrar, it should verify if the fields of login and password are empty, if they are empty it should pop up an alert telling that the fields are empty.
i have the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="{{ url_for('static', filename='loginStyle.css') }}"> -->
<title>MobBi - Login</title>
</head>
<body>
<div id="login-form">
<form action="" method="post">
<label for="login">Login</label>
<br>
<input type="text" id="login-field" name="login" placeholder="Digite seu login aqui">
<br>
<label for="senha">Senha</label>
<br>
<input type="password" id="senha-field" name="senha" placeholder="Digite sua senha aqui">
<br>
<button type="submit" id="botao-entrar" onclick="entrar()">Entrar</button>
</form>
</div>
<script src="{{ url_for('static', filename='loginScript.js') }}"></script>
</body>
</html>
const botao = document.getElementById("botao-entrar");
function entrar() {
const login = document.getElementById("login-field");
const senha = document.getElementById("senha-field");
const login_is_empty = login.value.length == 0;
const senha_is_empty = senha.value.length == 0;
if (login_is_empty || senha_is_empty) {
alert("Os campos de login e senha não foram preenchidos");
}
}
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/login" methods=["GET", "POST"])
def render_login():
return render_template("login.html")
if __name__ == "__main__":
app.run(debug=True)
When i run my code and click the button Entrar with empty fields it works, showing the alert that the fields are empty, but then, the page reloads and don't work anymore, why?