Laravel 5 – Client side validation using Parsley.js with example

By | June 4, 2018
Client side validation using Parsley.js

In this example i will let you know how to implement laravel5 – client side validation using Parsley.js with example. As we all know for security purposes we should validate data before sending any forms on server directly.

Parsley.js is a javascript library provides simple and pretty validations. This library has many inbuilt rules to validate form’s data. Using this library we can validate simple contact form, credit card data etc. And parsley.js can be easily integrate with any web application built on php, .net, java, python etc. So here let’s start the steps to integrate parsley.js with our laravel application.

Step1: Include Javascript library file

Firstly we will need parsley.js library file. You can download it from here .

Let’s assume you have already created a form in laravel blade file form.blade.php.

<script src="jquery.js"></script>
<script src="parsley.min.js"></script>

Include above two files parsley.js with jquery.js file. Here i am using minified version of it. You are free to use parsley.js or parsley.min.js and jquery is necessary for proper working.

Step2: Validate form script

Here i am taking a simple form with some fields to show a demo how it works.

@extends('layouts.app')
@section('content')
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <h1 class="text-primary" style="text-align: center;">
            Register
        </h1>
    </div>
</div>
<div style="margin:0px auto;width:600px">
    <div class="row">
        {!! Form::open(['url' => route('order-post-2'), 'data-parsley-validate', 'id' => 'payment-form']) !!}
        <div class="col-md-6">
            <div class="form-group" id="first-name-group">
                {!! Form::label('firstName', 'First Name:') !!}
            {!! Form::text('first_name', null, [
                'class'                         => 'form-control',
                'required'                      => 'required',
                'placeholder'                   => 'First Name',
                'data-parsley-required-message' => 'First name is required',
                'data-parsley-trigger'          => 'change focusout',
                'data-parsley-pattern'          => '/^[a-zA-Z]*$/',
                'data-parsley-minlength'        => '2',
                'data-parsley-maxlength'        => '32',
                'data-parsley-class-handler'    => '#first-name-group'
                ]) !!}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" id="last-name-group">
                {!! Form::label('lastName', 'Last Name:') !!}
            {!! Form::text('last_name', null, [
                'class'                         => 'form-control',
                'required'                      => 'required',
                'placeholder'                   => 'Last Name',
                'data-parsley-required-message' => 'Last name is required',
                'data-parsley-trigger'          => 'change focusout',
                'data-parsley-pattern'          => '/^[a-zA-Z]*$/',
                'data-parsley-minlength'        => '2',
                'data-parsley-maxlength'        => '32',
                'data-parsley-class-handler'    => '#last-name-group'
                ]) !!}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" id="email-group">
                {!! Form::label('email', 'Email address:') !!}
            {!! Form::email('email', null, [
                'class' => 'form-control',
                'placeholder'                   => 'email@example.com',
                'required'                      => 'required',
                'data-parsley-required-message' => 'Email name is required',
                'data-parsley-trigger'          => 'change focusout',
                'data-parsley-class-handler'    => '#email-group'
                ]) !!}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group" id="pan-group">
                {!! Form::label('pan', 'Pan Number:') !!}
            {!! Form::text('pan', null, [
                'class' => 'form-control',
                'placeholder'                   => '123',
                'required'                      => 'required',
                'data-parsley-required-message' => 'Number name is required',
                'data-parsley-trigger'          => 'change focusout',
                'data-parsley-class-handler'    => '#email-group',
                'data-parsley-minlength'        => '2',
            	  'data-parsley-maxlength'        => '32'
                ]) !!}
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                {!! Form::submit('Add New User', ['class' => 'btn btn-primary btn-order', 'id' => 'submitBtn', 'style' => 'margin-bottom: 10px;']) !!}
            </div>
        </div>
        {!! Form::close() !!}
    </div>
</div>
<!-- PARSLEY -->
<script>
    window.ParsleyConfig = {
        errorsWrapper: '<div></div>',
        errorTemplate: '<div class="alert alert-danger parsley" role="alert"></div>',
        errorClass: 'has-error',
        successClass: 'has-success'
    };
</script>
<script src="{{ asset('jquery.min.js') }}"></script>
<script src="{{ asset('parsley.min.js') }}"></script>
@endsection

You can see in the above example how the blade file will look like after writing the validation code.

Preview of this form is like this

Preview

laravel validation with parsley js

For more validation’s rules and information about parsley.js  you can refer this link Parsley.js

If there is any problem to integrate this library, you can comment below. I will definitely help you.