Laravel 6 Ajax Form Validation Tutorial

Laravel 6 Ajax Form Validation Tutorial

In this post we will give you information about Laravel 6 Ajax Form Validation Tutorial. Hear we will give you detail about Laravel 6 Ajax Form Validation TutorialAnd how to use it also give you demo for it if it is necessary.

In this Tutorial, i would like to guide how to use ajax form validation in laravel 6. we will use laravel 6 validation with ajax post request. we will gives errors response and display it on front side using ajax laravel 6.

Form validation is a basic requirement of any form. we should implement validation even if you use ajax or simple form. But if you are working with jquery ajax then you can use also server side validation using laravel and display error messages on front side.

You can simply use laravel 6 validation like required, email, same, unique, date, integer etc using jquery ajax post, get, put or delete request. we will use Validator make function for create validation and check using passes() function.

In this example i will show you how to use laravel default validation with jquery ajax. Here we also print laravel validation message when false. So if you want to ajax form validation in laravel app then you are right place.

Just follow bellow step to create ajax validation example:

Step 1: Add Route

In first step we will create new two routes for demo. so open your routes/web.php file and add following route.

routes/web.php

Route::get('my-form','HomeController@myform');

Route::post('my-form','HomeController@myformPost')->name('my.form');

Step 2: Create Controller

In this point, now we should create new controller as HomeController. So run bellow command and create new controller.

php artisan make:controller HomeController

After bellow command you will find new file in this path app/Http/Controllers/HomeController.php.

In this controller we will write three method for ajax view and post as listed bellow methods:

1)myform()

2)myformPost()

So, let’s copy bellow code and put on HomeController.php file.

app/Http/Controllers/HomeController.php

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

use Validator;

class HomeController extends Controller

{

/**

* Display a listing of the myform.

*

* @return IlluminateHttpResponse

*/

public function myform()

{

return view('myform');

}

/**

* Display a listing of the myformPost.

*

* @return IlluminateHttpResponse

*/

public function myformPost(Request $request)

{

$validator = Validator::make($request->all(), [

'first_name' => 'required',

'last_name' => 'required',

'email' => 'required|email',

'address' => 'required',

]);

if ($validator->passes()) {

return response()->json(['success'=>'Added new records.']);

}

return response()->json(['error'=>$validator->errors()->all()]);

}

}


Also see:Laravel 6 Release New Features and Upgrade

Step 3: Create View File

In Last step, let’s create myform.blade.php(resources/views/myform.blade.php) for layout and we will write design code and jquery ajax code,so put following code:

resources/views/myform.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel 6 Ajax Validation Example - ItSolutionStuff.com</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

</head>

<body>

<div >

<h2>Laravel 6 Ajax Validation - ItSolutionStuff.com</h2>

<div style="display:none">

<ul></ul>

</div>

<form>

{{ csrf_field() }}

<div >

<label>First Name:</label>

<input type="text" name="first_name" placeholder="First Name">

</div>

<div >

<label>Last Name:</label>

<input type="text" name="last_name" placeholder="Last Name">

</div>

<div >

<strong>Email:</strong>

<input type="text" name="email" placeholder="Email">

</div>

<div >

<strong>Address:</strong>

<textarea name="address" placeholder="Address"></textarea>

</div>

<div >

<button >Submit</button>

</div>

</form>

</div>

<script type="text/javascript">

$(document).ready(function() {

$(".btn-submit").click(function(e){

e.preventDefault();

var _token = $("input[name='_token']").val();

var first_name = $("input[name='first_name']").val();

var last_name = $("input[name='last_name']").val();

var email = $("input[name='email']").val();

var address = $("textarea[name='address']").val();

$.ajax({

url: "{{ route('my.form') }}",

type:'POST',

data: {_token:_token, first_name:first_name, last_name:last_name, email:email, address:address},

success: function(data) {

if($.isEmptyObject(data.error)){

alert(data.success);

}else{

printErrorMsg(data.error);

}

}

});

});

function printErrorMsg (msg) {

$(".print-error-msg").find("ul").html('');

$(".print-error-msg").css('display','block');

$.each( msg, function( key, value ) {

$(".print-error-msg").find("ul").append('<li>'+value+'</li>');

});

}

});


</script>


</body>

</html>

Now we are ready to run our example so run bellow command for quick run:

php artisan serve

Now you can open bellow URL on your browser:

Also see:Laravel 6 Authentication Tutorial

http://localhost:8000/my-form

I hope it can help you…

Hope this code and post will helped you for implement Laravel 6 Ajax Form Validation Tutorial. 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 *

18  +    =  20

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