I am trying to use ajax in my application. I want the user to be able to see if their email and username is unique and can be used. I used AJAX to give live feedback to the user but I am now getting weird errors when posting via AJAX. Th e errors occurred when I added two fields to be validated: email and username, however, when the email post request is sent with the email and it passes validation it returns the username errors with the email request.
Route::get('/', [
'uses' => '\App\Http\Controllers\HomeController@index',
'as' => 'home',
]);
/**
* Authentication
*/
Route::get('/signup', [
'uses' => '\App\Http\Controllers\AuthController@getSignup',
'as' => 'auth.signup',
]);
Route::post('/signup', [
'uses' => '\App\Http\Controllers\AuthController@postSignup',
]);
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
/**
*
*/
class AuthController extends Controller {
public function getSignup() {
return view('auth.signup');
}
public function postSignup(Request $request) {
if($request->ajax()) {
$this->validate($request, [
'email' => 'required|unique:users|email|max:254',
'username' => 'required|unique:users|alpha_dash|max:16',
]);
}
$this->validate($request, [
'fullname' => 'required|alpha|max:20',
'email' => 'required|unique:users|email|max:254',
'password' => 'required|min:8',
'username' => 'required|unique:users|alpha_dash|max:16',
]);
}
}
$(function() {
function getEmail() {
$.post(
'signup',
{
email: $('#j-email').val(),
_token: $('input[name="_token"]').val(),
}
).always(function(data) {
var error = data.responseJSON;
if(error) {
$('.error-list').html('<li class="error">' + error.email[0] + '</li>');
$('#j-email').parent().removeClass('pass');
$('#j-email').parent().addClass('fail');
$('.error-list').addClass('show-error');
} else {
$('#j-email').parent().removeClass('fail');
$('#j-email').parent().addClass('pass');
$('.error-list').removeClass('show-error');
}
});
}
function getUsername() {
$.post(
'signup',
{
username: $('#j-username').val(),
_token: $('input[name="_token"]').val(),
}
).always(function(data) {
var error = data.responseJSON;
if(error) {
$('.error-list').html('<li class="error">' + error.username[0] + '</li>');
$('#j-username').parent().removeClass('pass');
$('#j-username').parent().addClass('fail');
$('.error-list').addClass('show-error');
} else {
$('#j-username').parent().removeClass('fail');
$('#j-username').parent().addClass('pass');
$('.error-list').removeClass('show-error');
}
});
}
$('#j-email').on('blur', function() {
getEmail();
});
$('#j-username').on('blur', function() {
getUsername();
});
});
So, do i have to create separate controllers for these ajax post requests ? Can I separate the validation into two if blocks that detect what input has been sent ? I'm not sure, but when the validation passes it returns all errors that should only be called when the form is all posted not via a single ajax post.
Does this do the job?
public function postSignup(Request $request) {
if($request->ajax()) {
$this->validate($request, [
'email' => 'required|unique:users|email|max:254',
'username' => 'required|unique:users|alpha_dash|max:16',
]);
if ($this->validate->fails()) {
return $this->validate->errors()->all();
}
}
$this->validate($request, [
'fullname' => 'required|alpha|max:20',
'email' => 'required|unique:users|email|max:254',
'password' => 'required|min:8',
'username' => 'required|unique:users|alpha_dash|max:16',
]);
}
Sign in to participate in this thread!
The Laravel portal for problem solving, knowledge sharing and community building.
The community