使用Laravel的Bootstrap Modals登录和登陆错误处理程序.

Question

当用户输入的信息被拒绝时，我正在努力显示模态表单。

有两个bug需要我去处理。

第一个 BUG是当我提交两个表单中的一个表单来验证用户时，如果提交时出现了一些错误，两个模态都会显示回来，而且错误信息会显示在两个对话框中的一个上面。

第二个 bug是，当我在处理其他表单错误时，两个模态都会出现。

我试着改变输入标签的id和名称属性，但这并没有帮助，反而让我更加困惑，因为我必须在后台改变更多的值，最终我把更多的事情搞砸了。我仍然认为是最好的方法如何进行。

@if ( (Route::current()->getName() != 'login' and 'register') and (count($errors) > 0 and !empty('singinForm')))
     <script>
          $(document).ready(function() {
          $('#signin_dialog').modal('show');
          $('#login_dialog').modal('hide');
       });
</script> 
@endif

这是我用来处理模态的一个方法。show 和 hide 但它不能正常工作

登录_模块.刀片.php

<div class="modal hide fade" id="signin_dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h4 class="modal-title">{{ __('Register') }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <form method="POST" action="{{ route('register') }}" id="singinForm">
                @csrf
                <div class="form-group row">

                    <!-- name input -->
                    <input placeholder="Name" id="nameSignin" type="text" class="form-control input_box @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
                    @error('nameSignin')
                    <span class="invalid-feedback" role="alert" style="text-align:center">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror

                    <!-- email input -->
                    <input placeholder="E-Mail Address" id="emailSignin" type="email" class="form-control input_box @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
                    @error('emailSignin')
                    <span class="invalid-feedback" role="alert" style="text-align:center">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror

                    <!-- password input -->
                    <input placeholder="Password" id="passwordSignin" type="password" class="form-control input_box @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
                    <input placeholder="Confirm Password" id="signin-password-confirm" type="password" class="form-control input_box" name="password_confirmation" required autocomplete="new-password">
                    @error('passwordSignin')
                    <span class="invalid-feedback" role="alert" style="text-align:center">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror

                    @if ( (Route::current()->getName() != 'login' and 'register') and (count($errors) > 0 and !empty('singinForm')))
                    <script>
                        $(document).ready(function() {
                            $('#signin_dialog').modal('show');
                            $('#login_dialog').modal('hide');
                        });
                    </script>
                    @endif

                </div>
                <div class="form-group row mb-0">
                    <div class="col-md-8 offset-md-2">
                        <button type="submit" class="button_box btn-primary">{{ __('Register') }}</button>
                        <button type="button" class="button_box btn-secondary" data-dismiss="modal" data-toggle="modal" data-target="#login_dialog">Log in</button>

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

    </div>
</div>

登录_模块.刀片.php

<div class="modal hide fade" id="login_dialog">
<div class="modal-dialog">
    <div class="modal-content">

        <div class="modal-header">
            <h4 class="modal-title">{{ __('Login') }}</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body">
            <form method="POST" action="{{ route('login') }}" id="loginForm">
                @csrf
                <div class="form-group">
                    <input placeholder="E-Mail Address" id="email" type="email" class="form-control input_box @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
                    @error('email')
                    <span class="invalid-feedback" role="alert" style="text-align:center">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                    <input placeholder="Password" id="password" type="password" class="form-control input_box @error('password') is-invalid @enderror" name="password" required autocomplete="current-password">
                    @error('password')
                    <span class="invalid-feedback" role="alert" style="text-align:center">
                        <strong>{{ $message }}</strong>
                    </span>
                    @enderror
                </div>

                <div class="form-group text-center">
                    @if (Route::has('password.request'))
                    <a class="btn btn-link" href="{{ route('password.request') }}">
                        {{ __('Recover Password') }}
                    </a>
                    @endif

                    @if ( (Route::current()->getName() != 'login' and 'register') and count($errors) > 0 and !empty('loginForm') )
                    <script>
                        $(document).ready(function() {
                            $('#login_dialog').modal('show');
                            $('#signin_dialog').modal('hide');
                        });

                    </script>
                    @endif
                </div>

                <div class="form-group">
                    <div class="form-group row mb-0">
                        <div class="col-md-8 offset-md-2">
                            <button type="submit" class="button_box btn-primary">{{ __('Login') }}</button>
                            <button class="button_box btn-secondary" data-toggle="modal" data-dismiss="modal" data-target="#signin_dialog" href="#signin_dialog">Sign in</button>

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

    </div>
</div>

Answer 1

试试这个。

把注册表的错误类从：

form-control input_box @error('email') is-invalid @enderror

改为:

form-control input_box @error('emailRegister') is-invalid @enderror

然后

@error('emailRegister')
   <span class="invalid-feedback" role="alert" style="text-align:center">
       <strong>{{ $message }}</strong>
   </span>
@enderror

在所有字段中都这样做。