How to validate the login without redirecting the page?

Posted on

Question :

I have the following login form in a dropdown, my question is, how to do login validation without redirecting the page?

Currently when the user informs a wrong password it is redirected to the login page and informs the error message.

 <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><b>Login</b> <span class="caret"></span></a>
    <ul id="login-dp" class="dropdown-menu">
        <div class="row">
        <div class="col-md-12">
            Login via
            <div class="social-buttons">
            <a href="#" class="btn btn-fb"><i class="fa fa-facebook"></i> Facebook</a>
            <a href="#" class="btn btn-tw"><i class="fa fa-twitter"></i> Twitter</a>
            <form class="form" role="form" method="POST" action="{{ url('/login') }}" action="login" accept-charset="UTF-8" id="login-nav">
            {!! csrf_field() !!}
            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                <input type="email" class="form-control" name="email" id="exampleInputEmail2" placeholder="Email address" required value="{{ old('email') }}">
                @if ($errors->has('email'))
                <span class="help-block">
                    <strong>{{ $errors->first('email') }}</strong>

            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                <input type="password" class="form-control" name="password" id="exampleInputPassword2" placeholder="Password" required>
                @if ($errors->has('password'))
                <span class="help-block">
                    <strong>{{ $errors->first('password') }}</strong>
                <div class="help-block text-right"><a href="{{ url('/password/reset') }}">Forget the password ?</a></div>

            <div class="form-group">
                <button type="submit" class="btn btn-primary btn-block">
                <i class="fa fa-btn fa-sign-in"></i>Login
            {{-- <div class="checkbox">
                <input type="checkbox"> keep me logged-in
            </div> --}}
        <div class="bottom text-center">
            Novo por aqui ? <a href="{{ url('/register') }}"><b>Registre-se</b></a>


Answer :

Come on. I think the best solution in your case to not redirect the page if there is an authentication error is to use ajax, because I understand you’re using a dropdown.

You can make your form send the information in the login form as follows:

$('#login-nav').submit(function (e)


        url: '/auth/login-ajax',

        success: function (response)
            if (! response.isLogged)
                // ação quando login é inválido


            // Ação para quando o cara logar

Create method in AuthController to check ajax login:

public function postLoginAjax(Request $request)
    $isLogged = auth()->attempt([
        'email'    => $request->get('email'),
        'password' => $request->get('senha')

    return response()->json(['isLogged' => $isLogged]);

Do not forget to register the method in routes.php

Route::post('/auth/login-ajax', ['uses' => 'AuthAuthController@postLoginAjax']);


Leave a Reply

Your email address will not be published. Required fields are marked *