Home Laravel Laravel React JS Form Validation

Laravel React JS Form Validation

by Shahriar Sagor

Today now in this example, i will show laravel react js form validation. Here in this simple example i will teach you laravel react js form submit example. Now we will use laravel 9 react js form validation. So in this post i will give you a very simple example of form validation in react js laravel.

We can also use this example with laravel 6, laravel 7, laravel 8 and laravel 9 any version.

Now in this tutorial, i will use laravel breeze, inertia js, vite and tailwind CSS for create react form validation in laravel application. Here i will create “posts” table also with title and body columns. Then i will create a simple form also with validation by using react.

So, let’s start and follow the below step to do react js form submit also with laravel vite. We can see this in the below example .

Step 1: Install Laravel

This part is optional; however, if you have not need created the laravel application, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app

Step 2: Create Auth with Breeze

Now, in this step, i have to use the composer command to install the breeze. So let’s need to run the bellow command and install the bellow library.

composer require laravel/breeze --dev

now, we have to create the authentication by using bellow command. We can also create the basic login, register and email verification by using react js. If you need to create team management then you have to pass the addition parameter. We can see this in the bellow commands:

php artisan breeze:install react

Now, let’s run node js package:

npm install

let’s run the vite, we need to keep start by this command:

npm run dev

now, we have to run migration the command to create the database table:

php artisan migrate

Step 3: Create Migration and Model

Here, we have create the database migration for posts table and also we have to create model for posts table.

php artisan make:migration create_posts_table

Migration:

<?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()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
  
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}
php artisan migrate

now you have create Post.php model by using the following command:

php artisan make:model Post

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;
  
    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'title', 'body'
    ];
}

Step 4: Create Route

Now In third step, i will create the routes for react js form submit. So now need to create two routes here.

routes/web.php

<?php
 
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
  
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
   
Route::get('posts/create', [FileController::class, 'create'])->name('posts.create');
Route::post('posts/create', [FileController::class, 'store'])->name('posts/store');
   
Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});
    
Route::get('/dashboard', function () {
    return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
   
require __DIR__.'/auth.php';

Step 5: Create Controller

Now in this step, i will create PostController file and then add the following code on it.

app/Http/Controllers/PostController.php

<?php
   
namespace App\Http\Controllers;
   
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
    
class PostController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create()
    {
        return Inertia::render('Posts/Create', [
            'message' => session('message'),
        ]);
    }
    
    /**
     * Show the form for creating a new resource.
     *
     * @return Response
     */
    public function store(Request $request)
    {
        Validator::make($request->all(), [
            'title' => ['required'],
            'body' => ['required'],
        ])->validate();
    
        Post::create($request->all());
    
        return redirect()->route('posts.create')
                    ->with('message', 'Post created successfully!');
    }
}

Step 6: Create React Pages

Here, now in this step i will create Create.jsx file with form.

so, let’s start and create it and then add the bellow code on it.

resources/js/Pages/Posts/Create.jsx

import React from 'react';
import Authenticated from '@/Layouts/Authenticated';
import { Head, useForm, Link, usePage } from '@inertiajs/inertia-react';
  
export default function Dashboard(props) {
  
    const { message } = usePage().props
  
    const { data, setData, errors, post } = useForm({
        title: "",
        description: "",
    });
  
    function handleSubmit(e) {
        e.preventDefault();
        post(route("posts.store"));
  
        data.title = "";
        data.body = "";
    }
  
    return (
        <Authenticated
            auth={props.auth}
            errors={props.errors}
            header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Laravel React JS Form Validation Example - CodingsPoint.com</h2>}
        >
            <Head title="Posts" />
 
            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 bg-white border-b border-gray-200">
  
                        { message &&
                            <div className="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert" >
                                <div className="flex">
                                    <div>
                                      <p className="text-sm">{ message }</p>
                                    </div>
                                </div>
                            </div>
                        }
  
                            <form name="createForm" onSubmit={handleSubmit}>
                                <div className="flex flex-col">
                                    <div className="mb-4">
                                        <label className="">Title</label>
                                        <input
                                            type="text"
                                            className="w-full px-4 py-2"
                                            label="Title"
                                            name="title"
                                            value={data.title}
                                            onChange={(e) =>
                                                setData("title", e.target.value)
                                            }
                                        />
                                        <span className="text-red-600">
                                            {errors.title}
                                        </span>
                                    </div>
                                    <div className="mb-0">
                                        <label className="">Body</label>
                                        <textarea
                                            type="text"
                                            className="w-full rounded"
                                            label="body"
                                            name="body"
                                            errors={errors.body}
                                            value={data.body}
                                            onChange={(e) =>
                                                setData("body", e.target.value)
                                            }
                                        />
                                        <span className="text-red-600">
                                            {errors.body}
                                        </span>
                                    </div>
                                </div>
                                <div className="mt-4">
                                    <button
                                        type="submit"
                                        className="px-6 py-2 font-bold text-white bg-green-500 rounded"
                                    >
                                        Save
                                    </button>
                                </div>
                            </form>
  
                        </div>
                    </div>
                </div>
            </div>
        </Authenticated>
    );
}

Run Laravel App:

That’s good all the needed steps have been done, now we need to type the given below command and then hit enter for run the Laravel application:

php artisan serve

Also keep run the following command for vite:

npm run dev

If we want to build then we can also run the following command:

npm run build

Now, need to go our web browser, then type the given URL and view the application output:

http://localhost:8000

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like