Laravel Client Side Validation using Parsley.js Example

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

So now in this post i want to show you how to add client side js validation by using Parsley. Parsley is javascript library and that is provides us a lot’s of validation for the form. On this library we can also use with PHP , .net etc language. But now in this post i will give you an example with laravel framework. Parsley.js is pretty good and very interesting js library.

Parsley.js through we can add required, Email, Number, Integer, Digits, Alphanum, Url, Minlength, Maxlength, Length, Min, Max, Range, Pattern, Check all the validation provide us. So we can also add the custom validation message by this validation rules. So we need to just give the attribute of Parsley.js package as like the bellow example.

We can use that very easily. By using this js we can do the front-end validation, For better know can check the bellow example.

Example: Blade file
@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 protected]',
	              '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="http://parsleyjs.org/dist/parsley.js"></script>
@endsection

For better know you get more information from here : Parsley.js

Read Also : How to convert Object into Array in PHP?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →