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>

The problem

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.

How can I fix this issue?