Laravel 6 jQuery Form Validation Example Tutorial with Demo

Laravel 6 jQuery Form Validation Example Tutorial with Demo

Laravel 6 jQuery form validation tutorial example. This tutorial explain you how you can add jquery validation with a custom error message in laravel 6 forms with example and running the demo.

First, we will create a form and after that, we will add jquery validation with a custom error message.

Laravel jQuery Form Validation Example

Follow the below steps and use jquery validation with laravel forms.

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

1. Install Laravel Fresh Setup

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

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

2. Setup Database

After successfully install laravel 5.9 Application, Go to your project .env file and set up database credential and move next step :

 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 model Contact -m 

Now go to Go to app/database/create_contacts_table.php and replace the below function :

   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

We will create two routes in the web.php file. Go to app/routes/web.php file and create two below routes here :

 Route::get('form-jquery', '[email protected]');
Route::post('store', '[email protected]');

5. Create Controller

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/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.');
    }
}

6. Create Blade view

In this step, we need to create a blade view file. Go to app/resources/views and create one file name contact.blade.php.

<html>
   <head>
      <title>Laravel Jquery Form Validation From Scratch</title>
      <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
      <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>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.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('store') }}" method="post" accept-charset="utf-8" id="contact_form">
                  @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>

   <script>
    if ($("#contact_form").length > 0) {
        $("#contact_form").validate({

            rules: {
                name: {
                    required: true,
                    maxlength: 50
                },

                email: {
                    required: true,
                    maxlength: 50,
                    email: true,
                },

                message: {
                    required: true,
                    minlength: 50,
                    maxlength: 500,
                },
            },
            messages: {

                name: {
                    required: "Please enter name",
                },
                message: {
                    required: "Please enter message",
                },
                email: {
                    required: "Please enter valid email",
                    email: "Please enter valid email",
                    maxlength: "The email name should less than or equal to 50 characters",
                },

            },
        })
    } 
 </script>
</html>

7. Run Development Server

We need to start the 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-jquery

Conclusion

In this tutorial, We have successfully validated form data on client-side in laravel 6 application using jquery validation. Also, we have sent validate form data to the server.

You may like

  1. Laravel Google ReCaptcha Form Validation
  2. Form Validation Example In Laravel 6
  3. Laravel 6 Ajax Form Submit With Validation Tutorial

If you have any questions or thoughts to share, use the comment form below to reach us.

Leave a Reply

Your email address will not be published. Required fields are marked *