Frontend validation on Fortify Login in Laravel with AJAX

I'm using Fortify to manage users authentication and I have a modal form for the login. My problem is every time I submit the form I can't see any errors because the page refreshes and closes the modal with the login form.

I would like to know if this validation is possible in the frontend without refreshing the page so the modal won't close. I've tried with Ajax but I can't find the right way to manage this or even in which controller I'm supposed to handle the if statement for the response.

I'll be really thankful if anyone could help me.

Here's my modal:

<!-- LOGIN Modal -->  <form  action="" method="post">      @csrf    <div class="modal fade" id="login" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">      <div class="modal-dialog modal-dialog-centered" >        <div class="modal-content">          <div class="modal-header">          <h5>Login</h5>            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>          </div>          <div class="modal-body">            <div class="alert alert-danger print-error-msg" style="display:none">              <ul></ul>          </div>            <div class="mb-3 row">                   <div class="col-sm"><br>                <input type="text" class="form-control" name="email" value="Email">              </div>            </div>            <div class="mb-3 row">                          <div class="col-sm">                <input type="password" class="form-control" id="inputPassword" name="password" value="Password">              </div>            </div>            <div class="d-grid gap-2">            <button type="submit" id="btn-login" class="btn btn-login">Continuar</button>            </div>          </div>          <div class="modal-footer">                      <label><a href="#recuperar" data-bs-toggle="modal" data-bs-dismiss="modal" class="recupere"><u>Recuperar password</u></a></label>          </div>        </div>      </div>    </div>    </form>  

And here's the Ajax:

  $(document).ready(function() {        $("#btn-login").click(function(e) {            e.preventDefault();                var _token = $("input[name='_token']").val();            var email = $("input[name='email']").val();            var password = $("input[name='password']").val();                           $.ajax({                url: config.routes.zone,                type: 'POST',                data: { _token: _token, email: email, password:password },                success: function(data) {                        if ($.isEmptyObject(data.error)) {                            window.location.href = ;                        } else {                        printErrorMsg(data.error);                    }                }            });        });            function printErrorMsg(msg) {            $(".print-error-msg").find("ul").html('');            $(".print-error-msg").css('display', 'block');            $.each(msg, function(key, value) {                $(".print-error-msg").find("ul").append('<li>' + value + '</li>');            });        }    });  

https://stackoverflow.com/questions/66556949/frontend-validation-on-fortify-login-in-laravel-with-ajax March 10, 2021 at 09:04AM