Laravel Client Side Validation using Parsley.js Example

Laravel Client Side Validation using Parsley.js Example

In this post we will give you information about Laravel Client Side Validation using Parsley.js Example. Hear we will give you detail about Laravel Client Side Validation using Parsley.js ExampleAnd how to use it also give you demo for it if it is necessary.

In this post i want to show you to add client side js validation. Parsley is javascript library that provides lot’s of validation for the form. this library you can also you with PHP, .net etc language. But in this post i did give you example with laravel 5 framework. Parsley.js is pretty interesting js library.

Parsley.js through you can add required, Email, Number, Integer, Digits, Alphanum, Url, Minlength, Maxlength, Length, Min, Max, Range, Pattern, Check etc validation provide. you can also add custome validation message for this validation rules. you have to just give attribute of Parsley.js package like bellow example. You can very easily use this js for front-end validation, you can check bellow preview and example.

Preview:

Example: Blade file

Also see:Laravel 5.3 Image Upload with Validation example

@extends('layouts.app')

@section('content')

<div >

<div >

<h1 style="text-align: center;">

Register

</h1>

</div>

</div>

<div style="margin:0px auto;width:600px">

<div >

{!! Form::open(['url' => route('order-post-2'), 'data-parsley-validate', 'id' => 'payment-form']) !!}

<div >

<div 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 >

<div 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 >

<div 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 >

<div 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 >

<div >

{!! 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 role="alert"></div>',

errorClass: 'has-error',

successClass: 'has-success'

};

</script>

<script src="http://parsleyjs.org/dist/parsley.js"></script>

@endsection

you get more information from here : Parsley.js

Hope this code and post will helped you for implement Laravel Client Side Validation using Parsley.js Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

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

2  +  7  =  

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US