Laravel - want to prevent modal before closing if error is in form

Question

I want to protect my login/register modals before closing if I click outside modal content, and next problem is if I fill the form bad, the modal will close, and after click on link, the error will be writen on this modal - I want to not closing if is error in filled forms and error will be wroten in opened modal, too I want if I click outside the modal content, that modal will not be closed.

This is the links to modals in header.blade.php:

<div id="app">
        <div class="container">
                  <a class="menu-link" data-toggle="modal" data-target="#loginModal">Přihlásit se</a>
          <a class="menu-link" data-toggle="modal" data-target="#registerModal">Registrace</a>
        </div>
       </div>
       @include('auth.login')
       @include('auth.register')

Here is the auth/login.blade.php code:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" id="loginModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="loginModalLabel">Přihlášení do Universe Of Art</h3>
          <button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form" action="{{ route('auth.login.send') }}" data-remote="true" method="post">
                  @csrf

                  <section class="field-container">
                     <input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
                  </section>
                  <section class="field-container">
                     <input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
                  </section>
                  <section class="field-container">
                     <input class="form-submit" type="submit" value="Přihlásit">
                  </section>


                  @if ($errors->has('email'))
                     {{ $errors->first('email') }}
                  @endif

                  @if ($errors->has('password'))
                     {{ $errors->first('password') }}
                  @endif
               </form>
        </div>

        <div class="modal-footer">
         <div style="ml-auto">
          @if (Route::has('auth.reset'))
                    <a class="btn btn-primary" href="{{ route('auth.reset') }}">Zapomněl jsem heslo</a>
                @endif
         </div>
         <div style="mr-auto">
          @if (Route::has('auth.reset'))
                    <a class="btn btn-primary" href="{{ route('auth.register') }}">Ještě nemám účet</a>
                @endif
         </div>
        </div>
      </div>
    </div>
  </div>

@section('scripts')
@parent  
@if($errors->has('email') || $errors->has('password'))
    <script>
      $(document).ready(function(){
          $('.launch-modal').click(function(){
          $('#loginModal').modal({
              show: true
              backdrop: 'static'
          });
      });
  });

    </script>
@endif
<script src="https://www.google.com/recaptcha/api.js?render=6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL"></script>
<script>
  grecaptcha.ready(function() {
    grecaptcha.execute('6LdQEOMUAAAAABcP5X1Pru0DUTS4Ajncc5jQPnIL', {action: 'auth.login.send'}).then(function(token) {
    ...
    });
  });
</script>
@endsection

And here is the auth/register.blade.php:

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" id="registerModal">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h3 class="modal-title" id="registerModalLabel">Registrace do Universe Of Art</h3>
          <button type="button" name="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form class="form" action="{{ route('auth.register.send') }}" method="post">
                  @csrf

                  <section class="field-container">
                     <input class="form-field" type="text" id="name" class="form-control" name="name" placeholder="Nick" required>
                  </section>
                  <section class="field-container">
                     <input class="form-field" type="email" id="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" placeholder="E-Mail" required>
                  </section>
                  <section class="field-container">
                     <input class="form-field" type="password" id="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" placeholder="Heslo" required>
                  </section>
                  <section class="field-container">
                     <input class="form-field" type="password" id="password-confirm" class="form-control" name="password_confirmation" placeholder="Heslo" required>
                  </section>
                  <section class="field-container">
                     <input class="form-submit" type="submit" value="Registrovat">
                  </section>

                  @if ($errors->has('name'))
                     {{ $errors->first('name') }}
                 @endif

                  @if ($errors->has('email'))
                     {{ $errors->first('email') }}
                  @endif

                  @if ($errors->has('password'))
                     {{ $errors->first('password') }}
                  @endif
               </form>
        </div>

        <div class="modal-footer">
         <div style="mx-auto">
          @if (Route::has('auth.login'))
                    <a class="btn btn-primary" href="{{ route('auth.login') }}">Již mám účet</a>
                @endif
         </div>
        </div>
      </div>
    </div>
  </div>

  @section('scripts')
  @parent

  <script>
  $(function () {
    $('#registerForm').submit(function (e) {
        e.preventDefault();
        let formData = $(this).serializeArray();
        $(".invalid-feedback").children("strong").text("");
        $("#registerForm input").removeClass("is-invalid");
        $.ajax({
            method: "POST",
            headers: {
                Accept: "application/json"
            },
            url: "{{ route('auth.register') }}",
            data: formData,
            success: () => window.location.assign("{{ route('auth.account') }}"),
            error: (response) => {
                if(response.status === 422) {
                    let errors = response.responseJSON.errors;
                    Object.keys(errors).forEach(function (key) {
                        $("#" + key + "Input").addClass("is-invalid");
                        $("#" + key + "Error").children("strong").text(errors[key][0]);
                    });
                } else {
                    window.location.reload();
                }
            }
        })
    });
})

Answer 1

You should use ajax to prevent modal closing as it will not refresh your page but if you dont want to use ajax you can achieve this by saving variable in session and after page resfresh check if variable exists then show modal with errors