Laravel Example

Laravel 5 FormRequest Validation with JavaScript

Laravel Javascript Validation reuses your Laravel FormRequest Validators to validate client-side forms automatically without writing any Javascript. 

Laravel Javascript Validation

Today I am going to show you how you can handle your FormRequest class validation into Javascript without refreshing any page.

I am going to use Laravel 5.4 Here. Laravel-jsvalidation package provides a feature to handle this thing easily. I am going to show you simple demo example where I will use my Request validation class into JavaScript.

Before moving on the code it's good to know dependency of code. This package uses jquery validate plugin and twitter bootstrap. of course, You can change it as per your own way.

So let's begin. You need to install package or clone it from Github. I would like to use composer command.

composer require proengsoft/laravel-jsvalidation

After successful installation, you need to register service provider and facade into your app.php file into config folder.

// config/app.php
'providers' => [

'aliases' => [
    'JsValidator' => Proengsoft\JsValidation\Facades\JsValidatorFacade::class,

Also, don't forget to publish configurations file of this package by using this command.

php artisan vendor:publish --provider="Proengsoft\JsValidation\JsValidationServiceProvider"

The above command will create jsvalidation.php into your config folder and jsvalidation into public/vendor directory and it will also create jsvalidation folder at resources/views/vendor.

You can see bootstrap.php into resources/views/vendor/jsvalidation directory. This is a template that provided by default for bootstrap error stack. You can change it and also you can write it as per your framework like Bulma or Materialcss. Of course, you need to change 'view' parameter at config file of jsvalidation.

I am here going to use bootstrap simple form and Laravel Form Request class for my validation. So here is my routing file which is web.php


Here is my RegisterController.php file which is inside app/Http/Controllers/RegisterController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use JsValidator;
use App\Http\Requests\RegisterFormRequest;

class RegisterController extends Controller

    public function getRegister()
        return view('welcome');

    public function postRegister(RegisterFormRequest $request)

As you can see getRegister method display page where actual form appearance. The Same postRequest method has an injection of FormRequest class where my validation rules are exits. Here is that:

// app/Http/Requests/RegisterFormRequest.php
namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;

class RegisterFormRequest extends FormRequest
    public function authorize()
        return true;

    public function rules()
        return [
            'title' => 'required',
            'email' => 'required',
            'body' => 'required',

rules() contains rules for my form. There are three different form inputs. Simple rules are all fields are required.

Now important thing in view file you need to add vendor/jsvalidation/js/jsvalidation.js as a script file. That file contains actual JavaScript validation code. In my case my view file is welcome.blade.php

<!doctype html>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="">

    <div class="container" style="margin-top:50px;">
        <div class="col-sm-12 text-center"  style="margin-bottom:50px;">
                Form Requests Validation Using JavaScript
        <form class="form-horizontal" role="form" method="POST" action="{{route('postregister')}}" id="my-form">
            <div class="form-group">
                <label for="title" class="col-sm-2 control-label">Title</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="title">
            <div class="form-group">
                <label for="email" class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="email">
            <div class="form-group">
                <label for="body" class="col-sm-2 control-label">Body</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" name="body">
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-default">Sign in</button>
    <script src="//"></script>
    <script src="//"></script>
    <!-- Laravel Javascript Validation -->
    <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
    {!! JsValidator::formRequest('App\Http\Requests\RegisterFormRequest', '#my-form'); !!}


In my Form file, there is three input and form tag with the csrf_token field. Because it's required with every POST request either Laravel will give you TokenMismatch error.

Here I used bootstrap CDN. And I also added jsvalidation javascript file. Then using JsValidator facade I write my FormRequest rules. JsValidator class Contains formRequest method in which my first argument is FormRequest class and second is my form tag selector.

Now JavaScript will validate your form without refreshing page. of course, you can use any validation rule. It supports all rules. 


Tutorial By Gautam Patadiya