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.

<li>
    <a href="#" data-toggle="modal" data-target="#SignUp">Signup</a>
</li>

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.

Also Read :  paypal payment Gateway Integration with laravel 5.5 -Paypal checkout Laravel

<div id="SignUp" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3 class="modal-title text-center primecolor">Sign Up</h3>
            </div>
            <div class="modal-body" style="overflow: hidden;">
                <div id="done-message" class="hide">
                    <div class="alert alert-info alert-dismissible fade in" role="alert">
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">×</span>
                      </button>
                      <strong>Success!</strong> Please Check Wer email for and login confirmation!!
                    </div>
                </div>
                <div class="col-md-offset-1 col-md-10">
                    <form method="POST" id="Signup">
                        {{ csrf_field() }}
                        <div class="form-datalive has-information">
                            <input type="text" name="name" value="{{ old('name') }}" class="mylivedsp" placeholder="Full name">
                            <span class="live24u live24u-user mylivedsp-information"></span>
                            <span class="text-live">
                                <strong id="name-msg-err"></strong>
                            </span>
                        </div>
                        <div class="form-datalive has-information">
                            <input type="email" name="email" value="{{ old('email') }}" class="mylivedsp" placeholder="Email">
                            <span class="live24u live24u-envelope mylivedsp-information"></span>
                            <span class="text-live">
                                <strong id="email-msg-err"></strong>
                            </span>
                        </div>
                        <div class="form-datalive has-information">
                            <input type="password" name="password" class="mylivedsp" placeholder="Password">
                            <span class="live24u live24u-lock mylivedsp-information"></span>
                            <span class="text-live">
                                <strong id="password-msg-err"></strong>
                            </span>
                        </div>
                        <div class="form-datalive has-information">
                            <input type="password" name="password_confirmation" class="mylivedsp" placeholder="Retype password">
                            <span class="live24u live24u-log-in mylivedsp-information"></span>
                        </div>
                        <div class="row">
                            <div class="col-xs-12 text-center">
                              <button type="button" id="submitForm" class="btn btn-primary btn-prime white btn-flat">Signup</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    </div>
</div>

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

Also Read :  Create JSON with json_encode and json_decode using PHP

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.

<script type="text/javascript">
    $('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);
                }
            },
        });
    });
</script>

Also Read :  PHP Ajax dynamic Progress Bar for PHP AJAX File Upload

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.

Leave a Reply

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