javascript - 在引导模式的不同选项卡上显示 laravel 身份验证错误

Question

我在 bootstrap modal 中实现了 Laravel Auth，bootstrap modal 有 2 个选项卡，一个用于登录，一个用于注册。

在注册选项卡上: 用户通过唯一的用户名和电子邮件注册，当单击注册按钮后电子邮件或用户名已经存在时，我想在注册选项卡上显示错误。它向我显示该错误，但该错误显示在登录选项卡上而不是注册选项卡上。

这是我的代码:

<div class="modal-tab-section wd-modal-tabs">
  <ul class="nav nav-tabs wd-modal-tab-menu text-center" role="tablist">
     <li class="nav-item">
        <a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab" aria-controls="login" aria-expanded="true">Prihlásiť sa</a>
     </li>
     <li class="nav-item">
        <a class="nav-link" id="sign-up-tab" data-toggle="tab" href="#sign-up" role="tab" aria-controls="sign-up">Zaregistrovať sa</a>
     </li>
  </ul>
  <div class="tab-content" id="myTabContent">
     <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
        <div class="row">
           <div class="col-md-6 p0 brand-description-area">

              <div class="brand-description">
                 <div class="brand-logo">
                    <img src="{{URL::asset('assets/img/DEALSON-LOGO1.png')}}" style="width: 25em;" alt="Logo">
                 </div>

              </div>
           </div>
           <div class="col-md-12 col-lg-6 p0">
              <div class="login-section text-center">
                 <div class="social-media">
                    <a href="{{ url('/auth/facebook') }}" class="facebook-bg"><i class="fa fa-facebook" aria-hidden="true"></i> Prihlásiť sa</a>

                    <a href="{{ url('/auth/google') }}" class="google-bg"><i class="fa fa" aria-hidden="true"></i>Google Prihlásiť sa</a>
                 </div>
                 <div class="login-form text-left">
                    <form method="POST" action="{{ route('login') }}">
                       @csrf
                       <div class="form-group">
                          <label for="email">Email</label>
                          <input type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" id="email" placeholder="Johnmist@gmail.com |">
                          @if ($errors->has('email'))
                          <span class="invalid-feedback" role="alert">
                             <strong>{{ $errors->first('email') }}</strong>
                          </span>
                          @endif
                       </div>
                       <div class="form-group">
                          <label for="password">Heslo</label>
                          <input type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" id="password" name="password" placeholder="*********">
                          @if ($errors->has('password'))
                          <span class="invalid-feedback" role="alert">
                             <strong>{{ $errors->first('password') }}</strong>
                          </span>
                          @endif
                       </div>
                       <button type="submit" class="btn btn-primary wd-login-btn">Prihlásiť sa</button>
                       <a class="btn btn-link" href="{{ route('password.request') }}">
                 {{ __('Zabudol som heslo?') }}
             </a>
                       <div class="form-check">
                          <label class="form-check-label">
                             <input type="checkbox" class="form-check-input">
                             Uložiť heslo
                          </label>
                       </div>
                       <div class="wd-policy">
                          <p>
                             Pokračovaním. Potvrdzujem, že som si prečítal a pochopil<a href="{{'/policy.html'}}"> podmienky používania a zásady ochrany osobných údajov</a> . Nemáte účet? <a href="{{'/register'}}" class="black-color"><strong><u>Prihlásiť sa</u></strong></a>
                          </p>
                       </div>
                    </form>
                 </div>
              </div>
           </div>
        </div>
     </div>
     <div class="tab-pane fade" id="sign-up" role="tabpanel" aria-labelledby="sign-up-tab">
        <div class="row">
           <div class="col-md-6 p0 brand-login-section">

              <div class="brand-description">
                 <div class="brand-logo">
                    <img src="{{URL::asset('assets/img/DEALSON-LOGO1.png')}}" style="width: 25em;" alt="Logo">
                 </div>

              </div>
           </div>
           <div class="col-md-6 p0">
              <div class="sign-up-section text-center">
                 <div class="login-form text-left">
                    <form method="POST" action="/register">
                       @csrf
                       <div class="form-group">
                          <label for="email">Email</label>
                          <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                       </div>
                       <div class="form-group">
                          <label for="username">Užívateľské meno</label>
                          <input type="text" class="form-control" id="username" placeholder="John Smith" name="username">
                       </div>
                       <div class="form-group">
                          <label for="password">Heslo</label>
                          <input type="password" class="form-control" id="password" placeholder="*********" name="password">
                       </div>
                       <div class="form-check">
                          <label class="form-check-label">
                             <input type="checkbox" class="form-check-input" name="subscribe">
                             Odoberať novinky
                          </label>
                       </div>
                       <button type="submit" class="btn btn-primary wd-login-btn">Zaregistrovať sa</button>
                       <div class="wd-policy">
                          <p>

                          </p>
                       </div>
                    </form>
                 </div>
              </div>
           </div>
        </div>
     </div>
  </div>

当 laravel 在验证后在注册 Controller 中检查它时，会出现错误。

Prihlásiť sa 表示登录

Zaregistrovať sa 表示注册

是登录/注册模式的图像

是我在注册选项卡的另一个选项卡上想要的错误:

Answer 1

您可以为此使用命名错误包。

来自 docs :

If you have multiple forms on a single page, you may wish to name the MessageBag of errors, allowing you to retrieve the error messages for a specific form. Pass a name as the second argument to withErrors:

return redirect('register')->withErrors($validator, 'login');

You may then access the named MessageBag instance from the $errors variable:

{{ $errors->login->first('email') }}

添加错误包后，您可以使用如下内容显示正确的选项卡:

<div id="login"
     class="tab-pane fade @if($errors->register->isEmpty()) show active @endif">
...
</div>

<div id="register"
     class="tab-pane fade @if(! $errors->register->isEmpty()) show active @endif">
...
</div>