Laravel - 如果错误在表单中，想要在关闭之前阻止模态

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

您应该使用 ajax 来防止模态关闭，因为它不会刷新您的页面，但如果您不想使用 ajax，您可以通过在会话中保存变量并在页面刷新后检查变量是否存在然后显示带有错误的模态来实现此目的