如何在验证错误时防止模态关闭 - Laravel 8 + bootstrap

Question

我想防止模式在验证错误时关闭。我正在使用来自 bootstrap.

的模式

这是我的触发按钮

<div class="col-lg-6 col-5 text-right">
     <button  class="btn btn-sm btn-neutral" data-toggle="modal" data target="#newUpsell">New</a>
</div>

这是我的模态：

<div class="modal fade" id="newUpsell" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form method="POST" action="{{ route('upsells.store') }}">
                    @csrf
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="upsell_date">Upsell Date</label>
                            <input type="date" class="form-control" id="upsell_date" name="upsell_date">
                            @error('upsell_date')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label for="room_number">Room Number</label>
                            <input type="number" class="form-control" id="room_number" name="room_number" placeholder="3133">
                            @error('room_number')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="nat_id">Nationality</label>
                        <select class="form-control" aria-label="form-select" id="nat_id" name="nat_id">
                            <option value="">--select one--</option>
                            @foreach ($nationalities as $nat)
                            <option value="{{ $nat->id }}">{{ $nat->code }} - {{ $nat->name }}</option>
                            @endforeach
                        </select>
                        @error('nat_id')
                            <p class="text-red"><small>{{ $message }}</small></p>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="guest_name">Guest Name</label>
                        <input type="text" class="form-control" id="guest_name" name="guest_name" placeholder="Dyah Ayu Kartika">
                        @error('guest_name')
                            <p class="text-red"><small>{{ $message }}</small></p>
                        @enderror
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="arrival">Arrival</label>
                            <input type="date" class="form-control" id="arrival" name="arrival">
                            @error('arrival')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label for="departure">Departure</label>
                            <input type="date" class="form-control" id="departure" name="departure">
                            @error('departure')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="original_category">Original Category</label>
                            <select class="form-control" aria-label="Default select example" id="original_category" name="original_category">
                                <option value="">--select one--</option>
                                <option value="DLX">Deluxe</option>
                                <option value="PRE">Premiere</option>
                                <option value="PKL">Premiere Lagoon</option>
                                <option value="FPK">Family Premiere</option>
                                <option value="DLS">Deluxe Suite</option>
                                <option value="PRS">Premiere Suite</option>
                                <option value="AVS">Anvaya Suite No Pool</option>
                                <option value="BFS">Beach Front Private Suite</option>
                                <option value="ASW">Anvaya Suite Whirlpool</option>
                                <option value="ASP">Anvaya Suite Private Pool</option>
                                <option value="AVR">Anvaya Residence</option>
                                <option value="AVP">Anvaya Villa</option>
                            </select>
                            @error('original_category')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                        <div class="form-group col-md-6">
                            <label for="Upsell Category">Upsell Category</label>
                            <select class="form-control" aria-label="Default select example" name="upsell_category" id="upsell_category">
                                <option value="">--select one--</option>
                                <option value="PRE">Premiere</option>
                                <option value="PKL">Premiere Lagoon</option>
                                <option value="FPK">Family Premiere</option>
                                <option value="DLS">Deluxe Suite</option>
                                <option value="PRS">Premiere Suite</option>
                                <option value="AVS">Anvaya Suite No Pool</option>
                                <option value="BFS">Beach Front Private Suite</option>
                                <option value="ASW">Anvaya Suite Whirlpool</option>
                                <option value="ASP">Anvaya Suite Private Pool</option>
                                <option value="AVR">Anvaya Residence</option>
                                <option value="AVP">Anvaya Villa</option>
                            </select>
                            @error('upsell_category')
                                <p class="text-red"><small>{{ $message }}</small></p>
                            @enderror
                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-5">
                                <label for="upsell_type">Upsell Type</label>
                                <select class="form-control" id="upsell_type" name="upsell_type">
                                    <option value="">--select one--</option>
                                    <option value="Upsell">Upsell</option>
                                    <option value="Extra">Extra</option>
                                    <option value="Walk - In">Walk - In</option>
                                    <option value="Extend Stay">Extend Stay</option>
                                </select>
                                @error('upsell_type')
                                    <p class="text-red">{{ $message }}</p>
                                @enderror
                            </div>
                            <div class="form-group col-md-5">
                                <label for="selling_price">Upsell Price</label>
                                <input type="number" class="form-control" id="selling_price" name="selling_price" placeholder="">
                                @error('selling_price')
                                    <p class="text-red"><small>{{ $message }}</small></p>
                                @enderror
                            </div>
                            <div class="form-group col-md-2">
                                <label for="upsell_roomnight">RNs</label>
                                <input type="number" class="form-control" id="upsell_roomnight" name="upsell_roomnight" placeholder="5?">
                                @error('upsell_roomnight')
                                    <p class="text-red"><small>{{ $message }}</small></p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

每当我提交表单时，我的模式都会关闭，但由于验证错误，数据并未真正提交。我怎样才能防止它并在模式打开期间显示错误？

Answer 1

如果您想保持模式打开，您必须通过某种 javascript 和 AJAX 请求处理表单提交。否则，无论验证通过与否，页面都会重新加载。

如果您不习惯 javascript，您也可以使用 https://laravel-livewire.com/。

如何在验证错误时防止模态关闭 - Laravel 8 + bootstrap

How to prevent modal from closing when validation error - Laravel 8 + bootstrap

validation

bootstrap-modal

bootstrap-4

laravel-8