ItSolutionStuff.com

Laravel Client Side Validation using Parsley.js Example

By Hardik Savani • November 5, 2023
Laravel Parsley JS

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

@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="http://parsleyjs.org/dist/parsley.js"></script>

@endsection

you get more information from here : Parsley.js

Tags: Laravel
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

Laravel 10 Razorpay Payment Gateway Integration Example

Read Now →

Laravel 10 Ajax Form Validation Example Tutorial

Read Now →

Laravel 10 Form Validation Tutorial Example

Read Now →

How to Convert Number to Words in Laravel?

Read Now →

Laravel React JS Form Validation Example

Read Now →

How to Check Laravel Version of a Your Project?

Read Now →

How to Generate QR Code in Laravel?

Read Now →

Space Not Allowed Validation in Laravel Example

Read Now →

Laravel Mobile/Phone Number Validation Example

Read Now →

Laravel Validation Check If Value is Not Equal to a Another Field

Read Now →

Laravel File Upload with Validation Example

Read Now →

Laravel Repository Pattern Tutorial Example

Read Now →

How to Create Widgets in Laravel Application?

Read Now →