I've made a registration form with a lot of fields. Since when I submit data and the validator redirects back with errors some inputs are empty and the user has to lose time refilling them, I want to implement some front-end validations. I'm stuck on checking if an username is already used on submit button press becasuse I'm not expert about AJAX.

In the AuthController I've created a function that returns a Json containing a response in relation of existence or not of the username in the database.

class UserAuthController extends Controller
{
    public function isUserNameInUse( $username )
    {
        if (Auth::where('username', $username) != null){
            return [ 'is_used' => 1 ];
        }

            return [ 'is_used' => 0 ];
    }
}

In the routes.php there are these lines:

Route::group([ 'as' => 'api', 'prefix' => 'api', 'namespace' => 'Api'], function () {

     Route::group([ 'as' => 'auth', 'prefix' => 'auth'], function () {
          Route::any('/is_username_in_use/{username}', [
            'as' => 'isUserNameInUse',
            'uses' => 'UserAuthController@isUserNameInUse']);


    });

});

The view is like that (only a piece of the form):

<form action="{{ route('webpany.postSignup') }}" method="post" id="signup-form" class="form-horizontal">
            {!! csrf_field() !!}
            @include( 'errors.handler' )

                            <label for="username">
                                {{ _('Username*') }} </label>
                            <input type="text" class="form-control" name="username" id="username"
                                   value="{{ Input::old('username') }}" required>

                            <label for="password">
                                {{ _('Password*') }}
                            </label>

                            <input type="password" class="form-control" name="password" id="password"
                                   value="{{ Input::old('password') }}" onchange="form.confirmPassword.pattern = this.value;"
                                   required>

                            <label for="confirmPassword">
                                {{ _('Confirm Password*') }}
                            </label>

                            <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required>
                            <button class="btn btn-warning" id="submit-btn" type="submit">{{ _('Sign Up') }}</button>

</form> 

This is the script, for now I've only tried to log the response of the controller, but it prints anything.

$(document).ready(function () {
    $('form#signup-form').submit(function () {
         var input_username = $('input[name=username]').val();
         console.log(input_username);

        $.getJSON('/api/auth/is_username_in_use/' + input_username, function (json) {

            console.log(json);


            });
            return false;
        });

    });

I've made a registration form with a lot of fields. Since when I submit data and the validator redirects back with errors some inputs are empty and the user has to lose time refilling them, I want to implement some front-end validations. I'm stuck on checking if an username is already used on submit button press becasuse I'm not expert about AJAX.

In the AuthController I've created a function that returns a Json containing a response in relation of existence or not of the username in the database.

class UserAuthController extends Controller
{
    public function isUserNameInUse( $username )
    {
        if (Auth::where('username', $username) != null){
            return [ 'is_used' => 1 ];
        }

            return [ 'is_used' => 0 ];
    }
}

In the routes.php there are these lines:

Route::group([ 'as' => 'api', 'prefix' => 'api', 'namespace' => 'Api'], function () {

     Route::group([ 'as' => 'auth', 'prefix' => 'auth'], function () {
          Route::any('/is_username_in_use/{username}', [
            'as' => 'isUserNameInUse',
            'uses' => 'UserAuthController@isUserNameInUse']);


    });

});

The view is like that (only a piece of the form):

<form action="{{ route('web.pany.postSignup') }}" method="post" id="signup-form" class="form-horizontal">
            {!! csrf_field() !!}
            @include( 'errors.handler' )

                            <label for="username">
                                {{ _('Username*') }} </label>
                            <input type="text" class="form-control" name="username" id="username"
                                   value="{{ Input::old('username') }}" required>

                            <label for="password">
                                {{ _('Password*') }}
                            </label>

                            <input type="password" class="form-control" name="password" id="password"
                                   value="{{ Input::old('password') }}" onchange="form.confirmPassword.pattern = this.value;"
                                   required>

                            <label for="confirmPassword">
                                {{ _('Confirm Password*') }}
                            </label>

                            <input type="password" class="form-control" name="confirmPassword" id="confirmPassword" required>
                            <button class="btn btn-warning" id="submit-btn" type="submit">{{ _('Sign Up') }}</button>

</form> 

This is the script, for now I've only tried to log the response of the controller, but it prints anything.

$(document).ready(function () {
    $('form#signup-form').submit(function () {
         var input_username = $('input[name=username]').val();
         console.log(input_username);

        $.getJSON('/api/auth/is_username_in_use/' + input_username, function (json) {

            console.log(json);


            });
            return false;
        });

    });

• javascript
• php
• ajax
• laravel

Share Improve this question Follow asked Nov 9, 2015 at 19:43 Claudio KingClaudio King 1,61611 gold badge1111 silver badges1212 bronze badges 7

• Laravel is not PHP. PHP is used in Laravel. – i am me Commented Nov 9, 2015 at 19:46
• @3.14159265358... Laravel is a PHP framework, blade is a templating engine (aka php preprocessor) used with laravel. I'm not sure what your point is. – Domino Commented Nov 9, 2015 at 19:50
• There probably is a built-in way to do this in Laravel, but you should keep the form variables in the request and automatically refill the form when the page is reloaded. – Domino Commented Nov 9, 2015 at 19:53
• This is a security concern. Using this route (which anyone can find) random users can determine the usernames of other users. Instead, you should check this in your standard registration process. Do the entire registration through AJAX and depending on the response, display the error about username already in use or redirect (user would already by logged in by PHP) – Mikel Bitson Commented Nov 9, 2015 at 19:56
• I already check data after they are sent through post and I redirect back with errors if the validations don't pass, the problem is that some <select> lose their value because they are filled dinamically and it is a bit unconfortable to the users. – Claudio King Commented Nov 9, 2015 at 20:03

 |  Show 2 more ments

3 Answers 3

Sorted by: Reset to default 3

There is no need to make an explicit check if user name is in use. You may skip this part and instead, when you storing your user's data validate them accordingly.

An example of this might be

public function store(Request $request)
{
    $this->validate($request, [
        'username' => 'required|unique:users',
        'password' => 'required|confirmed'
    ]);

    // process your logic
}

This way, if validation failed, you'll get a json response object containing error messages.

---

Note, this will work if you're on Laravel 5. If you are on 4.* refer to documentation for validation part.

You should change return [ 'is_used' => 0 ]; into return Response::json([ 'is_used' => 0 ]); and add use Response; to the top of your controller.

Today I worked on the same kind of problem and here is my working code. Hope it could help you achieve your goal.

    

//Ajax code
    $(document).ready(function () {
    var userName = $('#userName');
    userName.blur(function () {
    var username = $(this).val();
    $.ajax({
    url: '/checkUsername',
    method: 'POST',
    data: { user_name: username },
    success: function (data) {
    if (data.exists) {
//Do whatever you want
    }

//route code
    Route::POST('/checkUsername', [UserController::class, 'validUsername'])- 
    >name('users.validUsername');

//Controller code

    public function validUsername(Request $request)
    {
        $username = $request->input('user_name');
        $exists = User::where('user_name', $username)->exists();
        return response()->json(['exists' => $exists]);
    }