Laravel 8 Ajax Form Validation Tutorial

Laravel 8 Ajax Form Validation Tutorial


Today we will make ajax form validation, so that we can make our form validation without refreshing web page. so, let's start...

 

#Our Final Output:

 



 

#Create a Laravel new project, run this command 

composer create-project --prefer-dist laravel/laravel blog

 

#Make Databse connection

Go to .env file and set the databse name that you create in your mysql dashboard admin panel

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_ajax_blog
DB_USERNAME=root
DB_PASSWORD=


#Create our custom route

routes/web.php


Route::get('post/create', [PostController::class, 'postCreateByAjax'])
->name('post.validation');
Route::post('post/store', [PostController::class, 'postStoreByAjax'])
->name('post.validation.store');


#Make Model

we will create Post model, run this command

php artisan make:model Post


Models/Post.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
use HasFactory;
protected $fillable = [
'title',
'description'
];

}

 

#Make Controller

we will create controller named PostController, run this command

php artisan make:controller PostController

 

app/Http/Controllers/PostController.php

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;
class PostController extends Controller
{

public function postCreateByAjax(){
return view('ajax.ajax-create');
}

public function postStoreByAjax(Request $request){

$validator = Validator::make($request->all(), [
'title' => 'required',
'description' => 'required',
]);

if ($validator->passes()) {

Post::create($request->all()); // it store data to the DB

return response()->json(['success'=>'Added new records.']);

}

return response()->json(['error'=>$validator->errors()]);

}
}

 

 

#Make Migration file

php artisan make:migration create_post_table --create=posts


database/migration/2020_09_20_163428_create_post_table.php

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->text('title');
$table->text('description');
$table->timestamps();
});
}

/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
}

 

#Complete migration, run this command

php artisan migrate


#Make views

resources/views/add_record.php

<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Validation Laravel 8</title>
<meta name="_token" content="{{ csrf_token() }}">

<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">
<div class="row mt-5">
<div class="col-md-8 offset-md-2">
<div class="row">
<div class="col-md-12 text-center">
<h4>Laravel 8 Ajax From Validation Tutorial</h4>
</div>


<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="card-title">
Create a New Record
</div>
<div class="body">
<form id="post-form">
@csrf
<div class="form-group">
<label for="title">Title:</label>
<input
type="text"
class="form-control title_err"
id="title"
name="title"
placeholder="Title">
<span class="text-danger error-text title_err"></span>

</div>
<span>Description:</span>
<div class="form-group">
<textarea
rows="6"
class="form-control"
id="description"
name="description">
</textarea>
<span class="text-danger error-text description_err"></span>
</div>
<button type="submit" class="btn btn-primary btn-submit">Add Record</button>
</form>
</div>
</div>

</div>
</div>

</div>
</div>
</div>
</div>

<script type="text/javascript">

$(document).ready(function() {

$(".btn-submit").click(function(e){

$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
e.preventDefault();


var _token = $("input[name='_token']").val();
var title = $("#title").val();
var des = $("#description").val();

//alert(title + " " + des);

$.ajax({
url: "{{ route('post.validation.store') }}",
type:'POST',
data: {_token:_token, title:title, description:des},
success: function(data) {
//alert("done")
console.log(data.error)
if($.isEmptyObject(data.error)){
alert(data.success);
document.getElementById("post-form").reset();
}else{
printErrorMsg(data.error);
}
}
});
});

function printErrorMsg (msg) {
$.each( msg, function( key, value ) {
console.log(key);
$('.'+key+'_err').text(value);
});
}
});
</script>

</body>
</html>


#Output:


I think, it will help you!

Read it too

Post a Comment