'How to prevent modal from closing when validation error - Laravel 8 + bootstrap
I want to prevent modal from closing when validation error. I am using modal from bootstrap.
here's my trigger button
<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>
and here is my modal:
<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">×</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>
my modal is closed whenever I submit the form, but the data is not actually submitted due to validation error. How can I prevent it and show the error during the modal is open?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|