Laravel 7/6 Form Submit Validation Example Tutorial

Laravel 7/6 form submit validation example. This tutorial shows you, how you can validate your form data on the server-side on controller and store data into database in laravel. This example tutorial also work with laravel 7.x version.

Laravel post/submit form data with validation made easy, here you will learn how to send form data on the controller and validate using laravel validation rules. as well as how to store validate form data in database in laravel.

For example, If sent form data is invalid, the server sends a return error message for a specific form field in laravel.

Laravel 7/6 Form Submit to Database with Validation

Follow the below easy steps to validate and submit your form data to database in laravel:

Install Laravel Fresh Setup
Setup Database
Make Migration file with Model
Make Route
Create Controller & Methods
Create Blade View
Start Development Server

1). Install Laravel Fresh Setup

First of all, we need to download laravel fresh setup. Use the below command and download fresh new laravel setup :

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

2). Setup Database

In this step, After successfully install laravel 7/6 Application. Then Go to your project .env file and set up database credential:

 DB_CONNECTION=mysql 
 DB_HOST=127.0.0.1 
 DB_PORT=3306 
 DB_DATABASE=here your database name here
 DB_USERNAME=here database username here
 DB_PASSWORD=here database password here

3). Make Migration file with Model

Use the below command. It will create one model also with one migration file.

 php artisan make:model Contact -m

Now go to Go to /database/migrations and open create_contacts_table.php file. Then add the below function into create_contacts_table.php file :

   public function up()
    {
        Schema::create('contacts', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name');
            $table->string('email');
            $table->text('message');
            $table->timestamps();
        });
    }

Before we run php artisan migrate command go to app/providers/AppServiceProvider.php and put the below code :

..
use Illuminate\Support\Facades\Schema;
 
....
function boot()
{
    Schema::defaultStringLength(191);
}
...

Next migrate the table using the below command.

php artisan migrate

Now go to app/Contact.php file and add the fillable properties like this :

protected $fillable = ['name', 'email', 'message'];

4). Make Route

Now, we will create two routes in web.php file. Go to app/routes/web.php file and create two below routes here :

 Route::get('form', 'ContactController@index');
 Route::post('form-store', 'ContactController@store');

5). Create Controller

In this step, we need to create a controller name ContactController. Use the below command and create Controller :

php artisan make:controller ContactController

After successfully create controller go to app/controllers/http//ContactController.php and put the below code :

<?php
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator,Redirect,Response;
use App\Contact;

class ContactController extends Controller
{

    public function index()
    {
      return view('contact');
    }

    public function store(Request $request)
    {
        $data = request()->validate([
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required'
        ]);
       
        $check = Contact::create($data);

        return Redirect::to("form")->withSuccess('Great! Form successfully submit with validation.');
    }
}

Recommended:- Laravel Custom Validation Error Message

6). Create Blade view

In this step, we need to create one blade view file name contact.blade.php and update the below code into your file:

<html>
   <head>
      <title>Laravel Form Validation From Scratch</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <meta name="csrf-token" content="{{ csrf_token() }}">
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
      <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   </head>
   <style type="text/css">
      body{
      background-color: #25274d;
      }
      .contact{
      padding: 4%;
      height: 400px;
      }
      .col-md-3{
      background: #ff9b00;
      padding: 4%;
      border-top-left-radius: 0.5rem;
      border-bottom-left-radius: 0.5rem;
      }
      .contact-info{
      margin-top:10%;
      }
      .contact-info img{
      margin-bottom: 15%;
      }
      .contact-info h2{
      margin-bottom: 10%;
      }
      .col-md-9{
      background: #fff;
      padding: 3%;
      border-top-right-radius: 0.5rem;
      border-bottom-right-radius: 0.5rem;
      }
      .contact-form label{
      font-weight:600;
      }
      .contact-form button{
      background: #25274d;
      color: #fff;
      font-weight: 600;
      width: 25%;
      }
      .contact-form button:focus{
      box-shadow:none;
      }
   </style>
   <body>
      <div class="container contact">
         <br><br><br>
         <div class="row">
            <div class="col-md-3">
               <div class="contact-info">
                  <img src="{{ url('public/images/1553741491contact-image.png') }}" alt="image"/>
                  <h2>Contact Us</h2>
                  <h4>We would love to hear from you !</h4>
               </div>
            </div>
            <div class="col-md-9">
               @if ($message = Session::get('success'))
               <div class="alert alert-success alert-block">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                  <strong>{{ $message }}</strong>
               </div>
               <br>
               @endif
               <form action="{{ url('form-store') }}" method="post" accept-charset="utf-8">
                  @csrf
                  <div class="contact-form">
                     <div class="form-group">
                        <label class="control-label col-sm-2" for="fname">First Name:</label>
                        <div class="col-sm-10">          
                           <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
                           <span class="text-danger">{{ $errors->first('name') }}</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-2" for="email">Email:</label>
                        <div class="col-sm-10">
                           <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
                           <span class="text-danger">{{ $errors->first('email') }}</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <label class="control-label col-sm-2" for="comment">Comment:</label>
                        <div class="col-sm-10">
                           <textarea class="form-control" rows="5" name="message" id="message"></textarea>
                           <span class="text-danger">{{ $errors->first('message') }}</span>
                        </div>
                     </div>
                     <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                           <button type="submit" class="btn btn-default">Submit</button>
                        </div>
                     </div>
                  </div>
               </form>
            </div>
         </div>
         <br><br><br><br>
      </div>
   </body>
</html>

7). Run Development Server

In this step open cmd and run php artisan server command to start development server. Use the php artisan serve command and start your server:

php artisan serve

Now we are ready to run our example so run bellow command to quick run.

 http://localhost:8000/form

Conclusion

In this tutorial, We have successfully validated form data in laravel 7/6 applications. When we have sent form data to the server, it will validate the return as a response.

our examples run quickly.

Live Demo