Laravel Validation In Bootstrap Model Using Ajax

Laravel Validation In Bootstrap Model Using Ajax

In this post we will give you information about Laravel Validation In Bootstrap Model Using Ajax. Hear we will give you detail about Laravel Validation In Bootstrap Model Using AjaxAnd how to use it also give you demo for it if it is necessary.

Today, Laravel share with you how to laravel validation handle in bootstrap popup using ajax. you have many time required this type functionality in your laravel aplication. so, we are write this tutorial for it how to dispan laravel validation error in bootstrap popoup or model.


We all are very familiar with laravel simple validation on post request and handale all validation error after any validatioon false it is vary easy and very simple. but manage laravel validation in popoup or model without page refresh is little bit hard for new commer in laravel.


When you use bootstrap model and popup for register form or any type of form that time you fill all the fields and click on submit button then if any validation false then how to handale in model without closing model when validation make false.


We are use laravel register form for this tutorials. we are open laravel register form open in bootstrap model and then manage registration form validation in bootstrap popup or model.


We are make some very easy for it simple follow this step.



Step : 1 Open Boostrap Model On Register Menu Link


If youe have create laravel new project then open resources/views/layouts/app.blade.php file and add bootstrap model link on it.




<li>
    <a href="http://tridentsportscars.com/?big=#" data-toggle="modal" data-target="#SignUp">Register</a>
</li>



Add model link on register menu then create model


Step : 2 Create Form In Model



Now, we are create register form into bootstrap model when user click on register menu then open register form on model and here we are manage laravel validation if any validation false then it diplay into the model.




<div id="SignUp"  role="dialog">
    <div >

    <!-- Modal content-->
        <div >
            <div >
                <button type="button"  data-dismiss="modal">×</button>
                <h3 >Sign Up</h3>
            </div>
            <div  style="overflow: hidden;">
                <div id="success-msg" >
                    <div  role="alert">
                      <button type="button"  data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                      <strong>Success!</strong> Check your mail for login confirmation!!
                    </div>
                </div>
                <div >
                    <form method="POST" id="Register">
                        {{ csrf_field() }}
                        <div >
                            <input type="text" name="name" value="{{ old('name') }}"  placeholder="Full name">
                            <span ></span>
                            <span >
                                <strong id="name-error"></strong>
                            </span>
                        </div>
                        <div >
                            <input type="email" name="email" value="{{ old('email') }}"  placeholder="Email">
                            <span ></span>
                            <span >
                                <strong id="email-error"></strong>
                            </span>
                        </div>
                        <div >
                            <input type="password" name="password"  placeholder="Password">
                            <span ></span>
                            <span >
                                <strong id="password-error"></strong>
                            </span>
                        </div>
                        <div >
                            <input type="password" name="password_confirmation"  placeholder="Retype password">
                            <span ></span>
                        </div>
                        <div >
                            <div >
                              <button type="button" id="submitForm" >Register</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>



After done write register model then write jquery ajax for form submit


Step : 3 jQuery Ajax Code For Form Submit


We are open laravel register form in bootstrap model then we are write here form submit into jquery ajax. simple copy followign and past into script tag.




<script type="text/javascript">
    $('body').on('click', '#submitForm', function(){
        var registerForm = $("#Register");
        var formData = registerForm.serialize();
        $( '#name-error' ).html( "" );
        $( '#email-error' ).html( "" );
        $( '#password-error' ).html( "" );

        $.ajax({
            url:'/register',
            type:'POST',
            data:formData,
            success:function(data) {
                console.log(data);
                if(data.errors) {
                    if(data.errors.name){
                        $( '#name-error' ).html( data.errors.name[0] );
                    }
                    if(data.errors.email){
                        $( '#email-error' ).html( data.errors.email[0] );
                    }
                    if(data.errors.password){
                        $( '#password-error' ).html( data.errors.password[0] );
                    }
                    
                }
                if(data.success) {
                    $('#success-msg').removeClass('hide');
                    setInterval(function(){ 
                        $('#SignUp').modal('hide');
                        $('#success-msg').addClass('hide');
                    }, 3000);
                }
            },
        });
    });
</script>



Step : 4 Overwrite register function


Now, last and final step is overwrite your RegisterController.php‘s register function. so open your app/Http/Controllers/Auth/RegisterController.php file and put into it following .




namespace AppHttpControllersAuth;

use AppUser;
use AppHttpControllersController;
use IlluminateSupportFacadesValidator;
use IlluminateFoundationAuthRegistersUsers;
use IlluminateHttpRequest;
use Response;

class RegisterController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Register Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles the registration of new users as well as their
    | validation and creation. By default this controller uses a trait to
    | provide this functionality without requiring any additional .
    |
    */

    use RegistersUsers;

    /**
     * Where to redirect users after registration.
     *
     * @var string
     */
    protected $redirectTo = '/home';

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest');
    }

    public function register(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'name' => 'required|max:255',
            'email' => 'required|email|max:255|unique:users',
            'password' => 'required|min:6|confirmed',
        ]);

        $input = $request->all();

        if ($validator->passes()) {

            // Store your user in database 

            return Response::json(['success' => '1']);

        }
        
        return Response::json(['errors' => $validator->errors()]);
    }
}



Now we are ready to run our example so run bellow command ro quick run:




php artisan serve



Now you can open bellow URL on your browser:




http://localhost:8000



If you face any problem then please write a comment or give some suggestions for improvement. Thanks…

Hope this and post will helped you for implement Laravel Validation In Bootstrap Model Using Ajax. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  18  =  23

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US