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.
In that article, the step 1 describes how to create fresh Laravel application and step 6 describes how to scaffold Laravel auth.
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
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'
]);
}
}
}
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');
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.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to remove duplicate values from an array in PHP
Use the PHP array_unique() fun...How to Strip All Spaces Out of a String in PHP
Use the PHP str_replace() Function Yo...Laravel 8 Create Dummy Data using laravel/tinker Package
Today we will learn how to engender dumm...How to install Samba share and transfer files between Windows and Linux
Samba is powerful and open-source tool f...How to call a function automatically after waiting for some time in jQuery
Use the jQuery delay() method You can...