Register and Login is basic functionality in any web application. One of the basic validation on registration form is to check whether the email already taken or available.
In this article, we will set validation in email and check whether the given email is taken or available. We will implement it on Laravel's default authentication module from fresh application.
Step 1: Create fresh Laravel application with auth
In that article, the step 1 describes how to create fresh Laravel application and step 6 describes how to scaffold Laravel auth.
Step 2: Database configuration
After the above steps completed, You may also need to setup database in .env file from root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=auth
DB_USERNAME=root
DB_PASSWORD=root
And need to run migrate command.
php artisan migrate
Step 3: Create a controller
We will need to create a controller which check the email in database and return a response. So create a controller using following artisan command:
php artisan make:controller EmailController
In the controller add checkEmail() method.
<?php
namespace App\Http\Controllers;
use Validator;
use App\Models\User;
use Illuminate\Http\Request;
class EmailController extends Controller
{
/**
* check for email address
*
* @param $request
* @return json
*/
public function checkEmail(Request $request)
{
$input = $request->only(['email']);
$request_data = [
'email' => 'required|email|unique:users,email',
];
$validator = Validator::make($input, $request_data);
// json is null
if ($validator->fails()) {
$errors = json_decode(json_encode($validator->errors()), 1);
return response()->json([
'success' => false,
'message' => array_reduce($errors, 'array_merge', array()),
]);
} else {
return response()->json([
'success' => true,
'message' => 'The email is available'
]);
}
}
}
Step 4: Create a route
Obviously we need a route which will trigger controller method. So open routes/web.php file and add a new route in it.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\EmailController;
Route::post('email-validate', [EmailController::class, 'checkEmail'])->name('checkEmail');
Step 5: Add ajax call in blade route.
The register blade view located at resources/views/register.blade.php file. We will add Ajax call in this file. Open this file and add the script code at the end of file.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Register') }}</div>
<div class="card-body">
<form method="POST" action="{{ route('register') }}">
@csrf
<div class="form-group row">
<label for="name" class="col-md-4 col-form-label text-md-right">{{ __('Name') }}</label>
<div class="col-md-6">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" required autocomplete="name" autofocus>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group row">
<label for="password-confirm" class="col-md-4 col-form-label text-md-right">{{ __('Confirm Password') }}</label>
<div class="col-md-6">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" required autocomplete="new-password">
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-6 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Register') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var startTimer;
$('#email').on('keyup', function () {
clearTimeout(startTimer);
let email = $(this).val();
startTimer = setTimeout(checkEmail, 500, email);
});
$('#email').on('keydown', function () {
clearTimeout(startTimer);
});
function checkEmail(email) {
$('#email-error').remove();
if (email.length > 1) {
$.ajax({
type: 'post',
url: "{{ route('checkEmail') }}",
data: {
email: email,
_token: "{{ csrf_token() }}"
},
success: function(data) {
if (data.success == false) {
$('#email').after('<div id="email-error" class="text-danger" <strong>'+data.message[0]+'<strong></div>');
} else {
$('#email').after('<div id="email-error" class="text-success" <strong>'+data.message+'<strong></div>');
}
}
});
} else {
$('#email').after('<div id="email-error" class="text-danger" <strong>Email address can not be empty.<strong></div>');
}
}
});
</script>
@endsection
In the script, we call Ajax request after user stop typing. This will prevent to call Ajax on every character input.
Everything is done of coding. Now we will need to run Laravel server with following command in Terminal.
php artisan serve
In the browser, run the url http://localhost:8000 and check register form.
I hope you liked this article and will help you on your work.
