Laravel 5: Best way to validate form with Javascript

Question

I want to validate forms in the client side in Laravel. It\'s there any easy way to do it?

Answer 1

Laravel 5 Javascript Validation not working with Laravel 5.3 for now. You will get a "Method [getFiles] does not exist." error, you can sort it out by follow this issue https://github.com/proengsoft/laravel-jsvalidation/issues/190

Also it doesn't work for array validation as it is new in Laravel 5.3

Answer 2

As discussed in the comments, since Laravel is a backend framework, it does not provide client side validation out of the box.
It shouldn't.

You might choose a Javascript framework such as Angularjs, emberjs, etc. that will have validation baked in.
Or if you're using jQuery, you can just use any jquery validation plugin, here are a few:

• http://formvalidation.io/
• http://jqueryvalidation.org/
• https://github.com/jzaefferer/jquery-validation

if you're using bootstrap, then you can use http://1000hz.github.io/bootstrap-validator/

Answer 3

When I'm working with Laravel I use Vue.js and can't be more happy about it for client side validation.
You can also use something else, just don't use jQuery (anymore), I strongly discourage it.

Answer 4

You can use the package Laravel 5 Javascript Validation. This package enables transparent Javascript Valditaion in your views based on JQuery Validation Plugin

This is a basic example of how to reuse your validation rules in the controller.

PostController.php

namespace App\Http\Controllers;

class PostController extends Controller {

    /**
     * Define your validation rules in a property in 
     * the controller to reuse the rules.
     */
    protected $validationRules=[
                'title' => 'required|unique|max:255',
                'body' => 'required'
    ];

    /**
     * Show the edit form for blog post
     * We create a JsValidator instance based on shared validation rules
     * @param  string  $post_id
     * @return Response
     */
    public function edit($post_id)
    {
        $validator = JsValidator::make($this->validationRules);
        $post = Post::find($post_id);

        return view('edit_post')->with([
            'validator' => $validator,
            'post' => $post
        ]);
    }

    /**
     * Store the incoming blog post.
     * @param  Request  $request
     * @return Response
     */
    public function store(Request $request)
    {
        $v = Validator::make($request->all(), $this->validationRules]);

        if ($v->fails())
        {
            return redirect()->back()->withErrors($v->errors());
        }

        // do store stuff
    }
}

In the view you simply should print the validator object passed to the view. Remember that this package depends of JQuery and you have to include before that jsvalidation.js

edit_post.blade.php

 <div class="container">
     <div class="row">
         <div class="col-md-10 col-md-offset-1">
             <form class="form-horizontal" role="form" method="POST" action="" id="ffffd">
                 <div class="form-group">
                     <label class="col-md-4 control-label">Title</label>
                     <div class="col-md-6">
                         <input type="text" class="form-control" name="title">
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-md-4 control-label">Array</label>
                     <div class="col-md-6">
                         <textarea name="body"></textarea>
                     </div>
                 </div>
             </form>
         </div>
     </div>
 </div>
 <!-- Scripts -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

 <!-- Laravel Javascript Validation -->
 <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
 {!! $validator !!}