Larsvel client side validation using Parsley.js example

0
128
Larsvel client side validation using Parsley.js example



In this post I want to show you how to add client side js validation. Parsley is a JavaScript library that provides a lot of validation for forms. You can also have this library with PHP, .net etc. language. But in this post I gave you an example with the Larva 5 Framework. Parsley.js is a very interesting JS library.

You can add required via parcel.js, email, number, integer, digits, alphanum, url, minlength, maxlength, length, minimum, maximum, range, pattern, check etc. provide validation. You can also add custom verification messages to this validation rules. All you need to do is to attribute the parcel.jas package such as the bellow example. You can use this JS for front-end verification very easily, you can see bellow preview and examples.

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

You can get more information from here: Parsley.js

.

LEAVE A REPLY

Please enter your comment!
Please enter your name here