Hello Devs,
In this tutorial, we will learn Laravel 8 Ajax Form Validation
you can submit the form using jquery and without the whole page refresh. When we submit an ajax form in laravel, we will add csrf token in the ajax request.
Follow this step-by-step guide below.
Step 1: Add Route:
add the following route.
routes/web.php
use App\Http\Controllers\PostController;
Route::get('ajax/validation', [PostController::class, 'ajaxValidation'])->name('ajax.validation');
Route::post('ajax/validation/store', [PostController::class, 'ajaxValidationStore'])->name('ajax.validation.store');Step 2: Create Controller
php artisan make:controller PostControllerapp/Http/Controllers/PostController.php.
There are two method for ajax view and post
- ajaxValidation()
- ajaxValidationStore()
copy the below code and paste it on PostController.php file.
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller;
use Illuminate\Http\Request;
use Validator;
class PostController extends Controller
{
/**
* Display a listing of the myformPost.
*
* @return \Illuminate\Http\Response
*/
public function ajaxValidation()
{
return view('post.ajaxValidation.ajaxValidation');
}
/**
* Display a listing of the myformPost.
*
* @return \Illuminate\Http\Response
*/
public function ajaxValidationStore(Request $request)
{
$validator = Validator::make($request->all(), [
'pswd' => 'required',
'email' => 'required|email',
'address' => 'required',
]);
if ($validator->passes()) {
return response()->json(['success'=>'Added new records.']);
}
return response()->json(['error'=>$validator->errors()]);
}
}Step 3: Create View File
resources/views/post/ajaxValidation/ajaxValidation.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Validation Laravel 8</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 100px;">
<h2>Ajax Validation form Laravel 8</h2>
<form>
@csrf
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
<span class="text-danger error-text email_err"></span>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
<span class="text-danger error-text pswd_err"></span>
</div>
<div class="form-group">
<label for="address">Address:</label>
<textarea class="form-control" name="address" id="address" placeholder="Address"></textarea>
<span class="text-danger error-text address_err"></span>
</div>
<button type="submit" class="btn btn-primary btn-submit">Submit</button>
</form>
</div>
<script type="text/javascript">
$(document).ready(function() {
$(".btn-submit").click(function(e){
e.preventDefault();
var _token = $("input[name='_token']").val();
var email = $("#email").val();
var pswd = $("#pwd").val();
var address = $("#address").val();
$.ajax({
url: "{{ route('ajax.validation.store') }}",
type:'POST',
data: {_token:_token, email:email, pswd:pswd,address:address},
success: function(data) {
console.log(data.error)
if($.isEmptyObject(data.error)){
alert(data.success);
}else{
printErrorMsg(data.error);
}
}
});
});
function printErrorMsg (msg) {
$.each( msg, function( key, value ) {
console.log(key);
$('.'+key+'_err').text(value);
});
}
});
</script>
</body>
</html>May this example help you.