Laravel 5.8 Form Validation Using Jquery

Laravel Redirect To Another URL / Web Page - HTTP Laravel Redirects

Today, We want to share with you Laravel 5.8 Form Validation Using Jquery.In this post we will show you Laravel Ajax Validation Tutorial Example From Scratch, hear for Jquery Submit Form Ajax PHP Laravel 5.8 Without Page load we will give you demo and example for implement.In this post, we will learn about Dynamically Add / Remove input fields in Laravel 5.8 using jQuery Ajax with an example.

Laravel 5.8 Form Validation Using Jquery

There are the Following The simple About Laravel 5.8 Form Validation Using Jquery Full Information With Example and source code.

Read Also:  Simple VueJS v-show and v-if Tutorial with example

As I will cover this Post with live Working example to develop Jquery Ajax Form Validation with Laravel 5.8, so the laravel 5.8 display validation errors ajax for this example is following below.

Step 1: Define a Laravel 5.8 Route

routes/web.php

Route::get('contact-us','[email protected]');
Route::post('contact-us','[email protected]');

Step 2: Create Controller

create new Laravel controller

php artisan make:controller ContactusController

app/Http/Controllers/ContactusController.php

<?php


namespace App\Http\Controllers;


use Illuminate\Http\Request;
use Validator;


class ContactusController extends Controller
{


    /**
     * Display a listing of the contactform.
     *
     * @return \Illuminate\Http\Response
     */
    public function contactform()
    {
    	return view('contactform');
    }


    /**
     * Display a listing of the contactformPost.
     *
     * @return \Illuminate\Http\Response
     */
    public function contactformPost(Request $request)
    {


    	$validator = Validator::make($request->all(), [
            'full_name' => 'required',
            'sirname' => '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 Laravel Blade View File

resources/views/contactform.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Ajax Validation Example - www.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>pakainfo.com - Free Source Code For Laravel Ajax Validation</h2>


    <div class="alert alert-danger display-err-message" style="display:none">
        <ul></ul>
    </div>


    <form>
        {{ csrf_field() }}
        <div class="form-group">
            <label>First Name:</label>
            <input type="text" name="full_name" class="form-control" placeholder="First Name">
        </div>


        <div class="pakainfo form-group">
            <label>Last Name:</label>
            <input type="text" name="sirname" class="form-control" placeholder="Last Name">
        </div>


        <div class="pakainfo form-group">
            <strong>User Email:</strong>
            <input type="text" name="email" class="form-control" placeholder="USer Email">
        </div>


        <div class="pakainfo form-group">
            <strong>Usre Address:</strong>
            <textarea class="form-control" name="address" placeholder="Usre 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 full_name = $("input[name='full_name']").val();
            var sirname = $("input[name='sirname']").val();
            var email = $("input[name='email']").val();
            var address = $("textarea[name='address']").val();


            $.ajax({
                url: "/contact-us",
                type:'POST',
                data: {_token:_token, full_name:full_name, sirname:sirname, email:email, address:address},
                success: function(data) {
                    if($.isEmptyObject(data.error)){
                        alert(data.success);
                    }else{
                        DisplayErrMessage(data.error);
                    }
                }
            });


        }); 


        function DisplayErrMessage (msg) {
            $(".display-err-message").find("ul").html('');
            $(".display-err-message").css('display','block');
            $.each( msg, function( key, value ) {
                $(".display-err-message").find("ul").append('<li>'+value+'</li>');
            });
        }
    });


</script>


</body>
</html>

http://localhost:8000/contact-us


Web Programming Tutorials Example with Demo

Read :

Read Also:  Validate is not a function in laravel

Summary

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

I hope you get an idea about Laravel 5.8 Form Validation Using Jquery.
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.

About Pakainfo

I am Jaydeep Gondaliya, a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Pakainfo →

Leave a Reply

Your email address will not be published. Required fields are marked *