Posted inTechnology / Laravel / Node.js

Laravel Validation and Bootstrap Modal Popup Form Submit with Ajax

Laravel Validation and Bootstrap Modal Popup Form Submit with Ajax

In this Post We Will Explain About is Laravel Validation and Bootstrap Modal Popup Form Submit with Ajax With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Bootstrap modal, jquery ajax form validation and db insert in laravelExample

In this post we will show you Best way to implement Laravel 5 and Vue JS CRUD with Pagination example, hear for Bootstrap Modal Popup Form Submit with Ajax and Laravel Validationwith Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.

Laravel Validation In Bootstrap Model Using Ajax

Phase : 1 Open Boostrap Model On Signup Menu Link

If we have create open source laravel php based frameworks new project then open resources/views/laWets/app.blade.php simple file as well AS and add simple bootstrap CSS model link on it.

  • Signup
  • Phase : 2 Create Form In Model

    and then, we are create signup form into simple bootstrap CSS model when user click on signup menu then open signup form on model and here we are manage open source laravel php based frameworks validation if any validation false then it diplay into the model.

    
    

    and then done write signup model source then write jquery ajax source for form submit

    Phase : 3 jQuery Ajax Code For Form Submit

    We are open open source laravel php based frameworks signup form in simple bootstrap CSS model then we are write here form submit source into jquery ajax. simple copy followign source and past into script tag.

    
        $('body').on('click', '#submitForm', function(){
            var signupForm = $("#Signup");
            var formData = signupForm.serialize();
            $( '#name-msg-err' ).html( "" );
            $( '#email-msg-err' ).html( "" );
            $( '#password-msg-err' ).html( "" );
    
            $.ajax({
                url:'/signup',
                type:'POST',
                data:formData,
                success:function(data) {
                    console.log(data);
                    if(data.query) {
                        if(data.query.name){
                            $( '#name-msg-err' ).html( data.query.name[0] );
                        }
                        if(data.query.email){
                            $( '#email-msg-err' ).html( data.query.email[0] );
                        }
                        if(data.query.password){
                            $( '#password-msg-err' ).html( data.query.password[0] );
                        }
                        
                    }
                    if(data.success) {
                        $('#done-message').removeClass('hide');
                        setInterval(function(){ 
                            $('#SignUp').modal('hide');
                            $('#done-message').addClass('hide');
                        }, 3000);
                    }
                },
            });
        });
    
    

    Phase : 4 Overwrite signup function

    and then, last and final phase is overwrite Wer RegisterController.php’s signup function. so open Wer app/Http/Controllers/Auth/RegisterController.php simple file as well AS and put into it following source.

    namespace App\Http\Controllers\Auth;
    
    use App\User;
    use App\Http\Controllers\Controller;
    use Illuminate\Support\Facades\Validator;
    use Illuminate\Foundation\Auth\RegistersUsers;
    use Illuminate\Http\Request;
    use Response;
    
    class RegisterController extends Controller
    {
    
        use RegistersUsers;
    
    
        protected $redirectTo = '/home';
    
    
        public function __construct()
        {
            $this->middleware('guest');
        }
    
        public function signup(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()) {
    
                return Response::json(['success' => '1']);
    
            }
            
            return Response::json(['query' => $validator->query()]);
        }
    }
    

    and then we are ready to run our example so run following below source source command ro quick run:

    php artisan serve
    
    

    and then We can open following below source source URL on Wer browser:

    http://localhost:8000
    
    

    Example

    I hope you have Got What is Bootstrap Modal Popup Form Submit with Ajax & PHP And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.

    I am Jaydeep Gondaliya , a software engineer, the founder and the person running Pakainfo. I'm a full-stack developer, entrepreneur and owner of Pakainfo.com. I live in India and I love to write tutorials and tips that can help to other artisan, a Passionate Blogger, who love to share the informative content on PHP, JavaScript, jQuery, Laravel, CodeIgniter, VueJS, AngularJS and Bootstrap from the early stage.

    Leave a Reply

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

    We accept paid guest Posting on our Site : Guest Post Chat with Us On Skype