I am making a blogging application with Laravel 8 and Bootstrap 5.
For adding a post I use a form placed within a Bootstrap modal.
In the Post model I have:
class Posts extends Model {
use HasFactory;
protected $fillable = [
'title',
'category_id',
'description',
'body'
];
}
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Posts;
class PostsController extends Controller {
public function addPost(Request $request) {
$rules = [
'title' => 'required|string',
'category_id' => 'required|exists:categories,id',
'description' => 'required|string',
'body' => 'required|string'
];
$messages = [
'title.required' => 'A title is required',
'category_id.required' => 'You must select a category from the list',
'description.required' => 'Add a short description',
'body.required' => 'You must provide content for this post',
];
// Validate form
$fields = $request->validate(rules, messages);
$form_data = [
'title' => $fields['title'],
'category_id' => $fields['category_id'],
'description' => $fields['description'],
'body' => $fields['body']
];
// Insert data in the 'posts' table
$query = Post::create($form_data);
if ($query) {
return redirect('/dashboard/posts')->with('success', 'Post added :)');
} else {
return redirect('/dashboard/posts/add')->with('error', 'Adding the post has failed :(');
}
}
}
The route:
Route::post('/dashboard/posts/add', [PostsController::class, 'addPost'])->name('add-post');
The form:
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add_post_modal">
<i class="fa fa-upload"></i> <span class="d-inline-block px-1">Add new</span>
</button>
<div class="modal fade" id="add_post_modal" tabindex="-1" aria-labelledby="add_post_modalLabel" aria-hidden="true">
<div class="modal-dialog">
<form action="{{ route('add-post') }}" method="POST" class="modal-content">
@csrf
<div class="modal-header">
<h5 class="modal-title">Ad new post</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
// Title
<div class="form-group mb-2 @error('title') has-error @enderror">
<label for="title">Title</label>
<input type="text" id="title" class="form-control @error('title') is-invalid @enderror" name="title" value="{{ old('title') }}">
@error('title')<span class="error-msg">{{ $message }}</span>@enderror
</div>
// Category
<div class="form-group mb-2 @error('category_id') has-error @enderror">
<label for="category">Category</label>
<select name="category_id" id="category" class="form-control @error('category_id') is-invalid @enderror">
<option value="0">Select a Category</option>
@foreach($categories as $category)
<option value="{{ $category->id }}">{{ $category->name }}</option>
@endforeach
</select>
@error('category_id')<span class="error-msg">{{ $message }}</span>@enderror
</div>
<div class="form-group mb-2 @error('description') has-error @enderror">
<label for="description">Description</label>
<input type="text" id="description" class="form-control @error('description') is-invalid @enderror" name="description" value="{{ old('description') }}">
@error('description')<span class="error-msg">{{ $message }}</span>@enderror
</div>
<div class="form-group mb-2 @error('body') has-error @enderror">
<label for="body">Content</label>
<textarea name="body" id="body" cols="30" rows="10">{{ old('body') }}</textarea>
@error('body')<span class="error-msg">{{ $message }}</span>@enderror
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
This problem appears whenever I try to submit an invalid form: although the form is not submitted, the modal closes. When I reopen it, I see the error messages corresponding to the invalid fields, but I need the modal to close only if the data is submitted.
This has nothing to do with your backend. You can manually open the modal after refresh if the form has errors.
@if(session()->has('error'))
<script>
$('#add_post_modal').modal('show');
</script>
@endif
Found this article related to your problem :
https://dev.to/ara225/how-to-use-bootstrap-modals-without-jquery-3475
It doesn't have jQuery, but the concept is the same. You can use plain JS or check Bootstrap's doc on how to do it.
Try this out:
@if(session()->has('error'))
<script>
var myModal = new bootstrap.Modal(document.getElementById('add_post_modal'));
myModal.show();
</script>
@endif
Link to the official bootstrap 5 documentation manually open modal
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community