Raviya Technical
Published in

Raviya Technical

Laravel Ajax Form Validation Tutorial

Add Route

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

Location:- Root/routes/web.php

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

Create Controller (Cmd)

At this point, now we should create a new controller as HomeController. So run the below command and create a new controller.

php artisan make:controller HomeController

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

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

1)myform()

2)myformPost()

So, let’s copy the below code and put it on HomeController.php file.

Location:- Root/app/Http/Controllers/HomeController.php

<?phpnamespace App\Http\Controllers;use Illuminate\Http\Request;
use Validator;
class HomeController extends Controller{/*** Display a listing of the myform.** @return \Illuminate\Http\Response*/public function myform(){return view('myform');}/*** Display a listing of the myformPost.** @return \Illuminate\Http\Response*/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()]);}}

Create View File

In the 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 the following code:

Location:- Root/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 class="container"><h2>Laravel 6 Ajax Validation - ItSolutionStuff.com</h2><div class="alert alert-danger print-error-msg" style="display:none"><ul></ul></div><form>{{ csrf_field() }}<div class="form-group"><label>First Name:</label><input type="text" name="first_name" class="form-control" placeholder="First Name"></div><div class="form-group"><label>Last Name:</label><input type="text" name="last_name" class="form-control" placeholder="Last Name"></div><div class="form-group"><strong>Email:</strong><input type="text" name="email" class="form-control" placeholder="Email"></div><div class="form-group"><strong>Address:</strong><textarea class="form-control" name="address" placeholder="Address"></textarea></div><div class="form-group"><button class="btn btn-success btn-submit">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 the bellow command for a quick run

php artisan serve

Start Brower

http://localhost:8000/my-form

--

--

--

PHP, Laravel And Flutter Development

Recommended from Medium

Front-End tools in terms of “-ilities” rules

Car Number Plate Recognition using CNN model

Announcing the Structuring Large Vue.js Application Series

Typescript: Type signatures for any function.

10 Javascript interview Questions and Answers

Access to Adobe Illustrator Preferences

Gutenberg Tutorials: #3 Attributes — Demonstrated and Explained

The wonder of Javascript’s array

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Raviya Technical

Raviya Technical

raviyatechnical.blogspot.com

More from Medium

Laravel Basic | Laravel Ajax Image Upload Example

Laravel 8 Form Validation Example

Laravel Basic | How to create Laravel Resource Controller example?

Laravel Advance | Laravel 7/6 Cron Job Task Scheduling Tutorial