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?
You have to handle the form submit via some kind of javascript and AJAX request if you want to keep the modal open. If you don't, the page will be reloaded no matter if the validation pass or not.
You could also use https://laravel-livewire.com/ if you are not confortable with javascript.