Laravel 7 jQuery Ajax Form Validation Example

Today, We want to share with you Laravel 7 jQuery Ajax Form Validation Example.In this post we will show you laravel form validation before submit, hear for Laravel 7.x, 6 Ajax Form Submit With Validation Tutorial we will give you demo and example for implement.In this post, we will learn about Laravel 7 Ajax Validation Example From Scratch with an example.

Laravel 7 jQuery Ajax Form Validation Example

There are the Following The simple About Laravel 6/7 Ajax Form Submit With Validation Full Information With Example and source code.

As I will cover this Post with live Working example to develop laravel ajax return validation error, so the Laravel 7 Ajax Form Submit With Validation is used for this example is following below.

Phase 1: Add Route

routes/web.php

Route::get('my-form','[email protected]');
Route::post('my-form','[email protected]')->name('my.form');

Phase 2: Make Controller

create new controller as PatientController

php artisan make:controller PatientController

app/Http/Controllers/PatientController.php

<?php
     
namespace App\Http\Controllers;
     
use Illuminate\Http\Request;
use Validator;
     
class PatientController 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(), [
            'member_f_name' => 'required',
            'member_l_name' => 'required',
            'email' => 'required|email',
            'locations' => 'required',
        ]);
     
        if ($validator->passes()) {
            return response()->json(['success'=>'Added new records.']);
        }
     
        return response()->json(['error'=>$validator->errors()->all()]);
    }
}

Phase 3: Make View File

resources/views/myform.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Ajax Validation Example - Pakainfo.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 7 Ajax Validation - Pakainfo.com</h2>
       
    <div class="alert alert-danger display-member-message" style="display:none">
        <ul></ul>
    </div>
       
    <form>
        {{ csrf_field() }}
        <div class="jdk form-group frm-web-group">
            <label>First Name:</label>
            <input type="text" name="member_f_name" class="dsp form-control frm-custom-model" placeholder="First Name">
        </div>
       
        <div class="jdk form-group frm-web-group">
            <label>Last Name:</label>
            <input type="text" name="member_l_name" class="dsp form-control frm-custom-model" placeholder="Last Name">
        </div>
       
        <div class="jdk form-group frm-web-group">
            <strong>Email:</strong>
            <input type="text" name="email" class="dsp form-control frm-custom-model" placeholder="Email">
        </div>
       
        <div class="jdk form-group frm-web-group">
            <strong>Address:</strong>
            <textarea class="dsp form-control frm-custom-model" name="locations" placeholder="Address"></textarea>
        </div>
       
        <div class="jdk form-group frm-web-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 member_f_name = $("input[name='member_f_name']").val();
            var member_l_name = $("input[name='member_l_name']").val();
            var email = $("input[name='email']").val();
            var locations = $("textarea[name='locations']").val();
       
            $.ajax({
                url: "{{ route('my.form') }}",
                type:'POST',
                data: {_token:_token, member_f_name:member_f_name, member_l_name:member_l_name, email:email, locations:locations},
                success: function(data) {
                    if($.isEmptyObject(data.error)){
                        alert(data.success);
                    }else{
                        printErrorMsg(data.error);
                    }
                }
            });
       
        }); 
       
        function printErrorMsg (msg) {
            $(".display-member-message").find("ul").html('');
            $(".display-member-message").css('display','block');
            $.each( msg, function( key, value ) {
                $(".display-member-message").find("ul").append('<li>'+value+'</li>');
            });
        }
    });


</script>


</body>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Requests has() and hasFile() in Laravel 6

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery validation example in laravel.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.