How to check a login form without refresh? [closed]

Question

How to check a login form without refresh? [closed]

Navigation

#1 by (0 votes)

1

I want something that when clicked on the Entrar button it sees if this is all ok password and correct email. How to do it in JavaScript (preference) or in AJAX?

javascript ajax

asked by anonymous 29.12.2015 / 12:01

1 answer

How to find out all objects on a JoyStick? Connection database sql server 2008 PDO [closed]

score 0 · Answer 1

Daniel, no matter how broad your question is, you can make 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><formid="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 the technology of your choice 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 };
    }
}