In this tutorial you will learn about the Laravel 8 Ajax Form Validation Tutorial and its application with practical example.
In this Laravel 8 Ajax Form Validation Tutorial I’ll show you how to submit form using ajax and validate form data in laravel 8 application. In this laravel form validation tutorial you will learn to submit and validate form using ajax in laravel form with built in laravel validation available in laravel. In this Laravel 8 ajax form validation tutorial I’ll share various validation implementation and use case. In this laravel ajax form validation tutorial we will be learning about laravel server side validations using ajax form submit. In this tutorial, I’ll show you how to submit and validate form data using ajax and to display validation errors.
Laravel 8 Form Validation
Laravel 8 comes many built-in validation rules that can be easily implemented. In this example, we have used some of following validation rules –
required:- It set input field is required.
min:- Validate minimum character length.
max:- Validate maximum character length.
email: It set input must be a valid email address.
unique: It checks for unique value against a database column.
numeric: Input value must numeric.
same:- It validates two input fields value must be same.
Laravel 8 Ajax Form Validation
In this step by step tutorial I’ll demonstrate you how perform server side validations using ajax in laravel form submit. We will also create example to submit and validate form data using ajax in laravel 8. Please follow the instruction given below:
Step 1: Add Route
In this step we will define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.
routes/web.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\HomeController; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('my-form', [HomeController::class, 'myform']); Route::post('my-form', [HomeController::class, 'myformPost'])->name('my.form'); |
Step 2: Create Controller
Next, we have to create a controller to display form and to handle form validation and submit operations. Lets Create a controller named HomeController using command given below –
|
1 |
php artisan make:controller HomeController |
Open the HomeController.php file and put the following code in it.
app/Http/Controllers/HomeController.php
In the controller we have following method to display form and to submit and validate form data using ajax:
1)myform()
2)myformPost()
app/Http/Controllers/HomeController.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php namespace 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()]); } } |
Step 3: Create View File
Now, create form blade view file to display form and submit to database. So, Go to resources/views and create resources/views/myform.blade.php and update the following code into it:
resources/views/myform.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
<!DOCTYPE html> <html> <head> <title>Laravel 8 Ajax Validation Example</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 8 Ajax Validation</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> |
Step 4: Run Development Server
Now we are ready to run our example so lets start the development server using following artisan command –
|
1 |
php artisan serve |
Now, open the following URL in browser to see the output –
|
1 |
http://localhost:8000/my-form |
