AuthController发现验证错误时，如何重定向到“注册模式”（bootstrap modal）窗口？

Question

I'm currently using Laravel built-in authentication system. But I'm not using any specific page for User registration, instead I'm using a bootstrap modal. My code works as I expected, but only when the registration information (input values) are correct.

But I want to redirect to registration modal window when the input fields values are invalid and want to show errors.

I'm attaching my codes as well as images for better understanding:

The code inside bootstrap modal window:

<button type="button" class="mdl-button mdl-js-button mdl-js-ripple-effect" data-toggle="modal" data-target="#registerModal">Register</button>

<div class="modal registerModal" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">User Registration</h4>
      </div>
      <form action="{{ route('register') }}" method="POST">
      <div class="modal-body">
          <div class="form-group">
            <div class="row">
              <div class="col-md-3"><label for="name">Name:</label></div>
              <div class="col-md-9"><input type="text" name="name" class="form-control" id="name" placeholder="Your name"></div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-3"><label for="email">Email:</label></div>
              <div class="col-md-9"><input type="email" name="email" class="form-control" id="email" placeholder="Your email **This should be unique**"></div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-3"><label for="password">Password:</label></div>
              <div class="col-md-9"><input type="password" name="password" class="form-control" id="password" placeholder="Your password"></div>
            </div>
            <br>
            <div class="row">
              <div class="col-md-3"><label for="password_confirmation">Confirm Password:</label></div>
              <div class="col-md-9"><input type="password" name="password_confirmation" class="form-control" id="password_confirmation" placeholder="Confirm your password"></div>
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Confirm Registration</button>
        {{ csrf_field() }}
      </div>
      </form>
    </div>
  </div>
</div>

Route:

Route::post('/auth/register', ['uses'=>'Auth\AuthController@postRegister', 'as'=>'register']);

The modal window on which I want to redirect:

Thanks.

Answer 1

在这种情况下，您有两个选择，您可以进行Ajax身份验证并接收有关控制器发送的错误响应的验证数据，或者可以检查bs3模态事件，我想您可以使用以下方法实现一些目的： http：/ /getbootstrap.com/javascript/#js-events 。

Answer 2

bretanac93's answer is a much more correct way of doing it because the modal itself would stay open and the user won't be as frustrated seeing an entire page flash when values are incorrect; that said it can be a lot of work to reimplement and add javascript logic/server validation logic ( it's probably worth doing ).

But that said; the issue is the modal does not reappear when you are returned to the page because of a validation error because in your current code the only thing to initialize the modal window is the button click itself. What you could do is add logic to redisplay the modal window on a validation failure.

Something like this;

@if( $errors->isNotEmpty() )
  <script>
    $(function () {
       $('#registerModal').modal('show')
    })
  </script>
@endif

All so keep in mind your current registration modal doesn't have any validation display code to show the user which parts are throwing the validation error.