RHAMAB RHAMAB - 3 months ago 72
Ajax Question

JQUERY AJAX laravel 5.2 username check availability

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?

Answer

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.

Comments