How to check a login form without giving refresh?

Asked

Viewed 628 times

1

I want something that when clicked on the button Entrar it sees if everything is ok password and email correct. A como fazer em Javascript (preferencia)ou em AJAX?

javascript ajax

  • Daniel, your question is very wide, you could show what you’ve tried and tell us what technology you use on the server side. what I can tell you is that you must validate the user login on server-side using Node.JS, C#, Java, PHP, Ruby or whatever other language you prefer... on client-side you can validate simpler things like a regex for email or password size.

  • Ajax doesn’t differ from Javascript, okay? The logic to use here would be the following: when clicked the send button triggers a function that takes password and login (the values of the field logically) and makes an ajax call (Voce can use jQuery) and requests something that in this case could be a PHP script that searches the database for the data, for example.

1 answer

0

Daniel, as wide as your question is, you can perform an AJAX request:

var logon = document.getElementById("logon");
var email = document.getElementById("email");
var password = document.getElementById("password");
var enviar = document.getElementById("enviar");

logon.addEventListener("submit", function (event) {
  var data = new FormData(logon);
  var httpRequest = new XMLHttpRequest();
  httpRequest.open(logon.method, logon.action, false);
  httpRequest.addEventListener("readystatechange", function (event) {
    if (httpRequest.readyState == 4) {
      if (httpRequest.status == 200) {
        //a requisição foi um sucesso... verifique o resultado da requisição;
        var response = JSON.parse(httpRequest.responseText);
        var sucess = response.sucess;
      } else {
        //ocorreu um erro na requisição... tente novamente;
      }
    }
  });
  httpRequest.send(data);
  
  //cancelar o envio sincrono;
  return false;
});
html, body {
  position: relative;
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
}

div, form, input {
  box-sizing: border-box;
}

#logon {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;  
  height: 110px;
  width: 240px;
  
  background-color: white;
  box-shadow: 0px 0px 10px black;
  padding: 10px 0px;
  border-radius: 10px;
  
}

.grid {
  display: -webkit-grid;
  grid-template-rows: repeat(3, 30px);
  grid-template-columns: 60px 170px;
}

.grid label {
  float: right;
}

.grid label:after {
  content: ':';
  padding-right: 5px;
}

.grid input {
  width: 100%;
}
<script src="https://rawgit.com/FremyCompany/css-grid-polyfill/master/bin/css-polyfills.js"></script>
<form id="logon" action="/auth/logon" method="post">
  <div class="grid">
    <div>
      <label for="email">Email</label>
    </div>
    <div>
      <!-- Email deve respeitar o Regex [a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$ -->
      <input id="email" name="email" type="email" value="" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
    </div>
    <div>
      <label for="password">Senha</label>
    </div>
    <div>
      <!-- Password deve ter pelo menos 6 digitos -->
      <input id="password" name="password" type="password" value="" min="6" />
    </div>
    <div>
    </div>
    <div>
      <input id="enviar" name="enviar" type="submit" value="Enviar" />
    </div>
  </div>
</form>

on the server side, you can use your preferred technology to validate the data, here are some examples:

Express.JS

var app = express();  
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

var router = express.Router();  
var auth = router.route('/auth');

auth.post('/logon', function(req, res) {
    var request = {
        logon: req.body.logon,
        password: req.body.password
    }

    //verifique os dados do logon aqui;
    //var sucess = true/false;

    res.json({ sucess: sucess });  
});

app.use('/api', router);

Spark Java

import static spark.Spark.*;

public class Auth{
    public static void main(String[] args) {
        post("/logon/auth", (req, res) -> {
            String logon = req.queryParams("logon");   
            String password = req.queryParams("password");   
            //verifique os dados do logon aqui;
            return new Gson().toJson(true/false);
        }, json());
    }
}

ASP.NET Webapi

public class AuthController : ApiController
{
    [HttpPost]
    public async Task<bool> Logon(LogonModel model)
    {
        var request = new {
            email = model.email,
            password = model.password
        };

        //verifique os dados do logon aqui;
        //var sucess = true/false;

        return new { sucess: sucess };
    }
}

Browser other questions tagged javascript ajax

You are not signed in. Login or sign up in order to post.