Laravel 9 Ajax Login Form Submit With Validation Handled

  • 24-08-2022
  • 1902
  • Jquery
  • Haresh Chauhan

Laravel 9 Ajax Login Form Submit With Validation Handled, in this post we will make a simple HTML form with the help of CSS. We will be using the ajax form request to submit the login form with email address and password.

In this Laravel 9 Ajax form validation for example we will send a login form request to the server side laravel application with a protected csrf token. also, we will validate this login form and if validation is passed we will show the validation to the login form top bar without page refresh.

In this ajax form validation Handel post we will also see to login user and redirect to the dashboard once they registered successfully.

Using ajax send requests, form handled, and stop refreshing the page, there is a lot of advantage to using ajax, and also nowadays ajax is the most important part of the client-side application where you don't want to refresh the page. or any activity that wants to be done on the same page. At that time ajax roles important.

To send an ajax request on the need to use any specific event, for example, submit an event, click event. In this example, I have used submit an event for form submit I want to send an ajax request that sends return response from the server side.

Preview :
image

Step 1. Create Laravel Project

Let's start by cloning a new laravel application. Use the below-provided command, Also you may change the project name as per your requirement. Goto terminal and run the command.

composer create-project --prefer-dist laravel/laravel example-app

Go to your project directory using "cd" and then give your project name and hit enter in your terminal.

cd example-app

Step 2. Create a Blade File

First, we will create a blade file for the HTML login form lookout, where users can enter their login credentials and be able to log in. So first we will make a simple HTML login form. add two fields in this form, email address, and password.

Laravel Adding Social Media Share buttons Advanced Tutorial Example

The script of the form submits using ajax you will find in this file at the bottom script. using that script we will send a form request and validate that credential which is entered by use, the credential current will return with success message and will user redirect to dashbaord page.

resources/views/login.blade.php 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ajax Login Form Submit Example - Webappfix</title>
    <style>
        @import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

        body {
            background: #c0c0c0; 
            font-family: Raleway, sans-serif;
            color: #666;
        }

        .login {
            margin: 20px auto;
            padding: 40px 50px;
            max-width: 300px;
            border-radius: 5px;
            background: #fff;
            box-shadow: 1px 1px 1px #666;
        }
        .login input {
            width: 100%;
            display: block;
            box-sizing: border-box;
            margin: 10px 0;
            padding: 14px 12px;
            font-size: 16px;
            border-radius: 2px; 
            font-family: Raleway, sans-serif;
        }

        .login input[type=text],
        .login input[type=password] {
            border: 1px solid #c0c0c0;
            transition: .2s;
        }

        .login input[type=text]:hover {
            border-color: #F44336;
            outline: none;
            transition: all .2s ease-in-out;
        } 

        .login input[type=submit] {
            border: none;
            background: #EF5350;
            color: white;
            font-weight: bold;  
            transition: 0.2s;
            margin: 20px 0px;
        }

        .login input[type=submit]:hover {
            background: #F44336;  
        }

        .login h2 {
            margin: 20px 0 0; 
            color: #EF5350;
            font-size: 28px;
        }

        .login p {
            margin-bottom: 40px;
        }

        .links {
            display: table;
            width: 100%;  
            box-sizing: border-box;
            border-top: 1px solid #c0c0c0;
            margin-bottom: 10px;
        }

        .links a {
            display: table-cell;
            padding-top: 10px;
        }

        .links a:first-child {
            text-align: left;
        }

        .links a:last-child {
            text-align: right;
        }

        .login h2,
        .login p,
        .login a {
            text-align: center;    
        }

        .login a {
            text-decoration: none;  
            font-size: .8em;
        }

        .login a:visited {
            color: inherit;
        }

        .login a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    
    {{-- LOGIN FORM --}}
    <form class="login" id="login-form">
        @csrf
        <h2>Welcome, User!</h2>
        <p>Please log in</p>
        <div class="error-message"></div>
        <input type="text" placeholder="Email Address" name="email"/>
        <input type="password" placeholder="Password" name="password"/>
        <input type="submit" value="Log In" />
    </form>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

    {{-- AJAX REQUEST SEND --}}
    <script>
        $('#login-form').submit(function(e){
    
            e.preventDefault();

            var email = $("input[name=email]").val();
            var password = $("input[name=password]").val();
            var csrf_token = $("input[name=_token]").val();
            
            $.ajax({
                type: "POST",
                url: "{{ route('login') }}",
                data: {email:email,password:password,_token:csrf_token},
                dataType: "json",
                success: function (response) {
                    if(response.code == 422){
                        $('.error-message').html('')
                        $.each(response.error, function (index, value) { 
                            $('.error-message').append('<span class="email-error" style="color:red">'+value+'</span></br>')
                        });
                    }else{
                        
                        // SUCCESS LOGIN ACTION YOUR PAGE REDIRECT TO DASHBAORD
                    }
                }
            });
        })
    </script>
</body>
</html>

Step 3. Define Routes

How To Use Where Clause With Two Fields Of The Same Table Examples

First create a Controller using suggested command.

php artisan make:controller LoginController

In this step we will define routes, the first route will be form view, the second route for the ajax request handled from the form, and the third route for the after successfully logged in with correct credential we will redirect to them to dashboard.

routes/web.php 
<?php

use Illuminate\Support\Facades\Route;

use App\Http\Controllers\LoginController;
/*
|--------------------------------------------------------------------------
| 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::view('login','login');
Route::post('login',[LoginController::class,'login'])->name('login');
Route::get('dashbaord',[LoginController::class,'dashbaord'])->name('dashbaord');

Step 4. LoginController

Here is Logincontroller.php, route will redirect to LoginController. The login method will start validating an ajax request if the validation field will through back to ajax with a validation error. The ajax will show a validation error on the top of the form.

If the validation passed! the response will send to ajax with a success message and also will send a redirect URL where you want to redirect after successfully logging in.

app/Http/Controllers/LoginController.php 
<?php
    
namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Validator;

class LoginController extends Controller
{
    public function login(Request $request)
    {
        $validator = Validator::make($request->all(),[
            'email' => 'required|email|exists:users',
            'password' => 'required|min:6'
        ]);

        if ($validator->fails()) {
            
            return response()->json(['error' => $validator->errors(),'code' => 422]);
        }

        if (auth()->attempt($validator)) {
            
            return response()->josn([
                'message' => 'Logged In successfully',
                'redirect_url' => route('dashboard'),
            ],
                200
            );
        }

        return response()->json('Email Or Password are wrong.');
    }

    public function dashbaord()
    {
        // Your dashbaord iew view file
    }
}

Step 5. Start Development Server

Start your application development server by the suggested command in your terminal.

php artisan serve

Open your browser, and run the below-given URL in your browser.

http://127.0.0.1:8000/login

Laravel 9 Google Drive File Upload/Store Tutorial

We always thanks to you for reading our blogs.

dharmesh-image

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

haresh-image

Haresh Chauhan

(Co-Founder)
We Are Also Recommending You :