JQUERY AJAX laravel 5.2 username check availability

Question

I want to check the availability of the username in the same page in my Registration Form in laravel 5.2. How Will i do it with Jquery AJAX. I want to check if a key is typed on the spot. I'm just a newbie. Please help?

are you going to use javasript validation rules or you want to use the laravel validation library ? — Punit Gajjar
– Punit Gajjar, Commented Sep 3, 2016 at 6:31
CAN I ASK FOR BOTH? So that I can use it for future references. Thanks :) — Fluxify
– Fluxify, Commented Sep 3, 2016 at 6:44
get into this room chat.stackoverflow.com/rooms/122559/laravel-5-2-talk — Punit Gajjar
– Punit Gajjar, Commented Sep 3, 2016 at 7:33
I am sorry, Can you please post your code for reference. You know I'm just a new to laravel and ajax. Thanks so much. I am new to this — Fluxify
– Fluxify, Commented Sep 4, 2016 at 11:26

Punit Gajjar · Accepted Answer · 2016-09-04 13:16:52Z

Here is my code,

Actually i did this with laravel 4.2 version but there wont't be any changes at code level just a syntac level changes are there like laravel 5.* uses {{ and }} brackets in blade files when larvel 5 uses {!! and !}}

Very first you will have to use the jquery validations method to validate your for, you can have a look on this link

This will give you better idea , that how to validate the for using jquery validations , which is so easy to use, just need to load a jquery and some validation methods thats it.

Here is my View file :

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<form action="{{ URL::to('signup/create') }}" method="POST" class="signup-form" id='signup-form1' enctype="multipart/form-data">

                    <div class="container">
                        <div class="row form-div">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtMsg custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="email" placeholder="Email Address" name="email" id="regemail">
                                        </span> </span>
                                        <div class="clearfix"></div>
                                        <div class="erroremail register-error-block"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtTag custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="text" placeholder="Gamer Tag" name="gamertag" id="gamertag">
                                        </span> </span> 
                                        <div class="clearfix"></div>
                                        <div class="errortag register-error-block"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="Create-account-btn">
                        <button class="btn btn-skew btn-red" type="submit" name="register" id="register-btn"><span>Create Account</span></button>
                    </p>
                </form>

Now add the jquery validation for this sign up form

$("#signup-form1").validate({
                    errorElement : 'div',
                    errorLabelContainer: '.errorTxt',
                    ignore: [],
                    rules: {
                        email:{
                            required:true, 
                            email:true,
                            remote: {
                                url: "signup/checkemail",
                                type: "post",
                                data: {email: $("input[email='email']").val(), _token: $('input[name=_token]').val()},
                                dataFilter: function (data) {
                                    var json = JSON.parse(data);
                                    if (json.msg == "true") {
                                        return "\"" + "Email address already in use" + "\"";
                                    } else {
                                        return 'true';
                                    }
                                }
                            }
                        },
                        gamertag: {
                            required: true,
                            alphanumeric:true
                        },
                    },
                    messages: {
                        email: {
                            required: "Email address is required.",
                            email: "Please enter valid email address.",
                            remote: "Email address already in use!"
                        },
                        gamertag: {
                            required: "Gamer Tag is required.",
                            alphanumeric: "Gamer Tag must contain alphanumeric string."
                        }
                    },
                    errorPlacement: function(error, element) {
                        //$(element).closest('.skew').append()
                        if (element.attr("name") == "email" ) {
                            $(".erroremail").append(error);
                        }
                        else if (element.attr("name") == "gamertag" ) {
                            $(".errortag").append(error);
                        }
                        else {
                                  error.append($('.errorTxt span'));
                        }
                    },
                    invalidHandler: function (event, validator) { //display error alert on form submit       

                    },
                    highlight: function (element) { // hightlight error inputs
                        $(element).closest('.skew').addClass('has-error'); // set error class to the control group
                    },
                    unhighlight: function (element) { // revert the change done by hightlight
                        $(element).closest('.skew').removeClass('has-error'); // set error class to the control group
                    },
                    success: function (label) {
                        label.closest('.skew').removeClass('has-error'); // set success class to the control group
                    },
                    submitHandler: function(form) {
                        //console.log(form);
                        $("#signup-form1").submit();
                        // Adding a New Post
                    }
                });

In above script if you have noticed then i have used remote: { } method what it does is it also check with th ajax call if the given email if exists in the database or not .

and to perform that i did some code in my controller which is some thing like this

Here is my Controller function to check if email is exists or not.

public function postCheckemail(){
      //$user = Register::where('email', Input::get('email'))->get();
      $user = DB::table('users')->where('email', Input::get('email'));
        if($user->count()) {
            return Response::json(array('msg' => 'true'));
        }
        return Response::json(array('msg' => 'false'));  
    }

Which is going to return the message with true and false in json format.

This was with the ajax,

Now if you dont want this jquery validations method then you can use the validation feature given by laravel itself here

Let say this is your View File :

<form action="{{ URL::to('signup/create') }}" method="POST" class="signup-form" id='signup-form1' enctype="multipart/form-data">

                    <div class="container">
                        <div class="row form-div">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtMsg custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="email" placeholder="Email Address" name="email" id="regemail">
                                        </span> </span>
                                        <div class="clearfix"></div>
                                        <div class="erroremail register-error-block"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtTag custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="text" placeholder="Gamer Tag" name="gamertag" id="gamertag">
                                        </span> </span> 
                                        <div class="clearfix"></div>
                                        <div class="errortag register-error-block"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="Create-account-btn">
                        <button class="btn btn-skew btn-red" type="submit" name="register" id="register-btn"><span>Create Account</span></button>
                    </p>
                </form>

And here is you Controller function to validate it.

public function postCreate(){
        $validator = Validator::make(array(
                'email' => Input::get( 'email' ),
                'gamertag' => Input::get( 'gamertag' ),
            ),      
            array(              
                'email' => 'required|email|unique:users',
                'gamertag' => 'required|min:3'
            ));

            if ($validator->fails())
            {       
                $messages = $validator->messages()->first();            
                //return Redirect::to('signup')->with('error_message', $messages);
                $data['success'] = false;    
                $data['message'] = $messages;
            }
            else
            {           
                //Your insert Query here to store the data in database 
            }

            return Response::json($data);
    }

Thats it!

Do not hesitate to ask me again if you stuck anywhere anytime.

Thank you sir, You are brilliant, Indians are really great :)
How About the your routes file in these sir? What is this url: "signup/checkemail",??
Route::controller('signup', 'SignupController'); What this will do is .write signup in the url and it will automatically call the index function of the signup controller and by signup/myFunctionNam you can each an every function of the controller. checkemail is my function here in the controller file. i wanted to call the function checkemail that is why i have written url: "signup/checkemail", in the remote URL of the jquery validation,
in laravel there is feature that you can define it when you are declaring a function like if you are writing public function getMyfunction { } then it will be consider as GET method and if you write postMyfunction then it is function with POST method. by default it uses GET. and declaring functions this way you dont need to mention it routes. That is the advantage.

Collectives™ on Stack Overflow

JQUERY AJAX laravel 5.2 username check availability

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related