How to send login errors back without any redirect ? Laravel 5.4

Question

In the Laravel code: AuthenticatesUsers.php there's this function that returns error messages back to the user, for example if they didn't enter a registered email address:

protected function sendFailedLoginResponse(Request $request)
{
    $errors = [$this->username() => trans('auth.failed')];

    if ($request->expectsJson()) {
        return response()->json($errors, 422);
    }

    return redirect()->back()
        ->withInput($request->only($this->username(), 'remember'))
        ->withErrors($errors);
}

My issue is that I'm using a Modal box so when this function redirects to the same page the modal disappears and the user can only see the errors when he clicks to see the modal again.

How can I send the data back without using redirect() or any refresh ?

This is the AJAX call I'm using:

<script type="text/javascript">
$(function(){

    $('#login').click(function(e) {
        e.preventDefault();
        $('#myModal').modal();
    });

    $(document).on('submit', '#formLogin', function(e) {  
        e.preventDefault();

        $.ajax({
            method: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            dataType: "json"
        })
        .done(function(data) {
            console.log(data);


        })
        .fail(function(data) {
            console.log(data);

        });
    });

})

</script>

For completion, this is the entire Modal with both the registration and login forms:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title" id="myModalLabel">recharge.ae | Welcome!</h4>
            </div>
            <div class="modal-body">


            <div id="reg-div">
                <h4>New customer? Register below.</h4>
                <form class="form-horizontal" method="POST" action="{{ route('register') }}" id="formRegister">
                            {{ csrf_field() }}

                            <div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
                                <label for="name" class="col-md-4 control-label">Name</label>

                                <div class="col-md-6">
                                    <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required autofocus>
                                    {{-- <small class="help-block"></small> --}}

                                    @if ($errors->has('name'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('name') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                                <div class="col-md-6">
                                    <input id="email-reg" type="email" class="form-control" name="email" value="{{ old('email') }}" required>
                                    {{-- <small class="help-block"></small> --}}

                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                <label for="password" class="col-md-4 control-label">Password</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" name="password" required>
                                    {{-- <small class="help-block"></small> --}}

                                    @if ($errors->has('password'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="password-confirm" class="col-md-4 control-label">Confirm Password</label>

                                <div class="col-md-6">
                                    <input id="password-confirm" type="password" class="form-control" name="password_confirmation" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary">
                                        Register and Log Me In
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div><!--#reg-div-->  


                    <div id="login-div">
                    <h4>Returning customer? Login below.</h4>
                        <form class="form-horizontal" method="POST" action="{{ route('login') }}" id="loginForm">
                            {{ csrf_field() }}

                            <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                                <label for="email" class="col-md-4 control-label">E-Mail Address</label>

                                <div class="col-md-6">
                                    <input id="email" type="email" class="form-control" name="email" value="{{ old('email') }}" required autofocus>

                                    @if ($errors->has('email'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('email') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                <label for="password" class="col-md-4 control-label">Password</label>

                                <div class="col-md-6">
                                    <input id="password" type="password" class="form-control" name="password" required>

                                    @if ($errors->has('password'))
                                        <span class="help-block">
                                            <strong>{{ $errors->first('password') }}</strong>
                                        </span>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-6 col-md-offset-4">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}> Remember Me
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">
                                    <button type="submit" class="btn btn-primary">
                                        Login
                                    </button>

                                    <a class="btn btn-link" href="{{ route('password.request') }}">
                                        Forgot Your Password?
                                    </a>
                                </div>
                            </div>
                        </form>  
                    </div><!-- #login-div -->          

            </div>
        </div>
    </div>

</div>

Answer 1

Well, return a JSON response rather than redirecting the page. Here's how to do it. Rather than this

return redirect()->back()
        ->withInput($request->only($this->username(), 'remember'))
        ->withErrors($errors);

write this

return json_encode([ 'errorr' => $$errors ]);

and via above line, you get the data in the done function of the ajax. There you just need to parse that JSON like this

data = JSON.parse(data);

and then you can access the errors like this data.errors but here you need to keep one thing in mind you will need to attach these errors in the html yourself

PS If there is anything that you don't understand feel free to ask