Comment ajouter une validation de formulaire jQuery Ajax dans une application Laravel.
Les requêtes Ajax sont une exigence fondamentale de tout projet PHP. Nous cherchons toujours un moyen d’enregistrer des données dans la base de données sans recharger la page, ce qui est possible uniquement via des requêtes jQuery Ajax.
Dans cet exemple, nous allons créer une table “posts” avec les colonnes “title” et “body”. Nous afficherons toutes les données des publications et ajouterons un bouton de création. Lorsque vous cliquez sur ce bouton, une fenêtre modale s’ouvrira, où vous pourrez créer une nouvelle publication en utilisant une requête Ajax avec jQuery.
En résumé, vous pouvez envoyer une requête post Ajax avec une fenêtre modale Bootstrap.
Table des matières : [Masquer]
Étapes de validation de formulaire Ajax dans Laravel
Installer Laravel 11
Créer une migration et un modèle
Créer un contrôleur
Créer des routes
Créer un fichier Blade
Lancer l’application Laravel
Étape 1 : Installer Laravel 11
composer create-project laravel/laravel example-appÉtape 2 : Créer une migration et un modèle
Nous allons créer une migration pour la table “posts”. Exécutez la commande ci-dessous et mettez à jour le code :
php artisan make:migration create_posts_tableFichier : database/migrations/2024_03_21_133331_create_posts_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up(): void()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down(): void
{
Schema::dropIfExists('posts');
}
};Ensuite, exécutez la migration créée :
php artisan migrateCréez ensuite le modèle Post :
php artisan make:model PostFichier : app/Models/Post.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
/**
* Write code on Method
*
* @return response()
*/
protected $fillable = [
'title', 'body'
];
}Étape 3 : Créer un contrôleur
Nous allons créer un nouveau PostController avec deux méthodes : index() pour afficher les vues et store() pour créer des publications avec une réponse JSON.
php artisan make:controller PostControllerFichier : app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
use App\Models\Post;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class PostController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(): View
{
$posts = Post::get();
return view('posts', compact('posts'));
}
/**
* Write code on Method
*
* @return response()
*/
public function store(Request $request): JsonResponse
{
$request->validate([
'title' => 'required',
'body' => 'required',
]);
Post::create([
'title' => $request->title,
'body' => $request->body,
]);
return response()->json(['success' => 'Post created successfully.']);
}
}Étape 4 : Créer des routes
Ouvrez le fichier routes/web.php et ajoutez les routes suivantes :
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PostController;
Route::get('posts', [ PostController::class, 'index' ]);
Route::post('posts', [ PostController::class, 'store' ])->name('posts.store');Étape 5 : Créer un fichier Blade
Créez un fichier resources/views/posts.blade.php. Dans ce fichier, nous afficherons toutes les publications et écrirons le code pour les requêtes Ajax avec jQuery.
resources/views/posts.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 11 Ajax Form Validation Example </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" ></script>
<meta name="csrf-token" content="{{ csrf_token() }}" />
</head>
<body>
<div class="container">
<div class="card mt-5">
<h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Ajax Form Validation Example - ItSolutionStuff.com</h3>
<div class="card-body">
<table class="table table-bordered mt-3">
<tr>
<th colspan="3">
List Of Posts
<button type="button" class="btn btn-success float-end" data-bs-toggle="modal" data-bs-target="#postModal"><i class="fa fa-plus"></i>
Create Post
</button>
</th>
</tr>
<tr>
<th>ID</th>
<th>Title</th>
<th>Body</th>
</tr>
@foreach($posts as $post)
<tr>
<td>{{ $post->id }}</td>
<td>{{ $post->title }}</td>
<td>{{ $post->body }}</td>
</tr>
@endforeach
</table>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="postModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create Post</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="ajax-form" action="{{ route('posts.store') }}">
@csrf
<div class="alert alert-danger print-error-msg" style="display:none">
<ul></ul>
</div>
<div class="mb-3">
<label for="titleID" class="form-label">Title:</label>
<input type="text" id="titleID" name="title" class="form-control" placeholder="Name">
</div>
<div class="mb-3">
<label for="bodyID" class="form-label">Body:</label>
<textarea name="body" class="form-control" id="bodyID"></textarea>
</div>
<div class="mb-3 text-center">
<button class="btn btn-success btn-submit"><i class="fa fa-save"></i> Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
/*------------------------------------------
--------------------------------------------
Form Submit Event
--------------------------------------------
--------------------------------------------*/
$('#ajax-form').submit(function(e) {
e.preventDefault();
var url = $(this).attr("action");
let formData = new FormData(this);
$.ajax({
type:'POST',
url: url,
data: formData,
contentType: false,
processData: false,
success: (response) => {
alert('Form submitted successfully');
location.reload();
},
error: function(response){
$('#ajax-form').find(".print-error-msg").find("ul").html('');
$('#ajax-form').find(".print-error-msg").css('display','block');
$.each( response.responseJSON.errors, function( key, value ) {
$('#ajax-form').find(".print-error-msg").find("ul").append('<li>'+value+'</li>');
});
}
});
});
</script>
</html>Tous les fichiers nécessaires sont prêts. Lancez l’application avec :
php artisan serveOuvrez votre navigateur et accédez à :
http://localhost:8000/posts