Laravel 6 jQuery Form Validation Example Tutorial

Larval 5.9 jquery from validation example tutorial from scratch. In this laravel tutorial, we are going to show you how to use jquery form validation with laravel. In this laravel tutorial, we will validate the form data on the client side before sending it to the server.

Jquery Form Validation

Contents

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

Install Laravel Fresh Setup

First of 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

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

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', ];

Make Route

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-jquery', '[email protected]');
Route::post('store', '[email protected]');

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

Create Blade view

In this step we need to create 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>

Start Development Server

We need 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-jquery

Conclusion

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

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

42 Comments

  1. Quality Proxies said:

    Appreciate it for all your efforts that you have put in this. very interesting info .

    September 14, 2019
    Reply
  2. george romero said:

    Excellent work, thanks.

    February 18, 2020
    Reply
  3. ปั้มไลค์ said:

    Like!! Great article post.Really thank you! Really Cool.

    May 25, 2020
    Reply
  4. Margart said:

    Hmm it appears much like your site ate my first comment (it had been super long) so I
    guess I’ll just sum it the things i had written and say, I’m thoroughly
    enjoying your site. I too am an aspiring blog blogger but I’m
    still a novice to everything. Are you experiencing any tips and hints for
    first-time blog writers? I’d genuinely appreciate
    it.

    My blog post – zippered wallet insert

    December 1, 2020
    Reply
  5. Tommy said:

    Informative article, just what I was looking for.

    Also visit my web page HongGNastase

    December 15, 2020
    Reply
  6. Coy said:

    Hello my friend! I wish to state that this post is amazing, great written and include almost all important infos.
    I’d like to look extra posts like this .

    Feel free to surf to my web site :: refillable notebook binder a5

    December 19, 2020
    Reply
  7. Sanora said:

    Hello There. I discovered your website using msn. This is certainly a very well written article.
    I am going to be certain to bookmark it and come back to see a greater portion of your useful information. I appreciate you the post.
    I’ll definitely return.

    Here is my blog post … bujo stickers

    January 17, 2021
    Reply
  8. Rosaria said:

    Hello mates, how is everything, and what you desire to say on the topic of this paragraph,
    in my view its genuinely remarkable in favor of me.

    My web site; LillaCRusley

    January 28, 2021
    Reply
  9. Meridith said:

    I’m truly enjoying the design and layout of your
    site. It’s a very easy on the eyes which makes it
    much more pleasant for me to come here and visit more
    often. Did you hire out a designer to create your theme?
    Exceptional work!

    My web blog: cheap flights

    January 31, 2021
    Reply
  10. Wilson said:

    Hello! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords but
    I’m not seeing very good results. If you know of any please share.
    Kudos!

    my web blog: ArronLFors

    January 31, 2021
    Reply
  11. Brodie said:

    Hola! I’ve been following your site for some time now and finally
    got the bravery to go ahead and give you a shout out from Porter Texas!
    Just wanted to tell you keep up the good job!

    Visit my blog :: cheap flights

    February 1, 2021
    Reply
  12. Courtney said:

    What i do not understood is actually how you’re no longer actually much more well-preferred than you may be right now.
    You’re so intelligent. You know therefore considerably with regards to this matter, produced me
    personally believe it from so many varied angles. Its like men and women don’t seem to be fascinated except it’s one
    thing to accomplish with Girl gaga! Your individual stuffs outstanding.
    All the time maintain it up!

    my web site; cheap flights, tinyurl.com,

    February 2, 2021
    Reply
  13. Luz said:

    This post is in fact a pleasant one it assists new the web viewers, who are wishing for blogging.

    Here is my page :: cheap flights

    February 2, 2021
    Reply
  14. Bette said:

    You could certainly see your skills in the article you write.
    The world hopes for even more passionate writers such
    as you who aren’t afraid to say how they believe.
    Always follow your heart.

    Feel free to visit my web blog … cheap flights, tinyurl.com,

    February 3, 2021
    Reply
  15. Aqcfgedecuddy said:

    cialis 10mg price cialis price does cialis work

    February 4, 2021
    Reply
  16. FvfcGeste said:

    how to get viagra toronto pharmacy2u viagra soft viagra over the counter stores in vancouver canada

    February 8, 2021
    Reply
  17. Thanh said:

    I’m really enjoying the theme/style of your site. Do you come across any internet browser compatibility problems?

    A couple of my blog visitors have complained about my blog
    not operating correctly in Explorer but looks great in Chrome.
    Do you have any recommendations to aid fix this problem?

    Also visit my blog … JoseMFodge

    February 10, 2021
    Reply
  18. Abcfgedecuddy said:

    no prescription viagra mastercard original viagra viagraonline

    February 11, 2021
    Reply
  19. Temeka said:

    Hi there, yeah this article is truly good and I have learned lot of things from
    it regarding blogging. thanks.

    my web blog cheap flights (http://tinyurl.com)

    February 12, 2021
    Reply
  20. Marguerite said:

    Alexander Mccall Smith Dalhousie Series A Court Of Thorns And Roses Google Docs

    Feel free to surf to my homepage – pdf list; vigorous-snyder-fa1026.netlify.app,

    February 16, 2021
    Reply
  21. Florentina said:

    I believe this is amongst the most important info for me.
    And i am glad reading your article. But should remark on few general things, The website style
    is great, the articles is really excellent : D.

    Good job, cheers

    Also visit my web page ring binder zip wallets

    February 17, 2021
    Reply
  22. Yvette said:

    Indian Association For The Cultivation Of Science Calcutta Vivekanand College Kolhapur Address

    My page: wordpress.com (nerquililmond1989.netlify.app)

    February 18, 2021
    Reply
  23. Luz said:

    Hello! I was able to have sworn I’ve been to this
    web site before but after browsing through some
    of the articles I realized it’s a novice to me.
    Anyhow, I’m certainly delighted I came across it and I’ll be bookmarking it and checking back regularly!

    My website … notebook wallet field notes

    February 19, 2021
    Reply
  24. Sterling said:

    Greetings from Los angeles! I’m bored to tears at work so I decided to browse your website on my iphone during lunch break.
    I really like the info you present here and
    can’t wait to take a look when I get home. I’m shocked
    at how fast your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyways, awesome site!

    my homepage: http://winstoryquest.website

    February 19, 2021
    Reply
  25. Jane said:

    It’s impressive that you will be getting ideas out of this article along with from the argument made at the place.

    my web-site; functional stickers

    February 20, 2021
    Reply

Leave a Reply

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