Jul 25, 2021
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 HomeControllerAfter 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 serveStart Brower
http://localhost:8000/my-form
