Bootstrap modal validation in Laravel

I have a registrarion modal which opens on click. The inputs are validated on the view using required, etc. Thing is, there are other fields (also in other modals I’m not mentionig) in which I validate again rules in my controller.

I’ve read that a good way of validating modals is using AJAX. I’m having a hard time with that.

This is a simplified verstion of my registration modal which is submitted without javascript or others:

<div id="RegisterModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;  </button>
            <h4 class="modal-title" id="myModalLabel">Register</h4>
        </div>

        <form class="form-horizontal" role="form" method="POST" action="{{ url('/register') }}">
            {!! csrf_field() !!}

            <div class="modal-body">

                <div class="form-group{{ $errors->has('first_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">First name</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="first_name"
                               value="{{ old('first_name') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('last_name') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Last name</label>

                    <div class="col-md-6">
                        <input type="text" class="form-control" name="last_name"
                               value="{{ old('last_name') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">E-Mail Address</label>

                    <div class="col-md-6">
                        <input type="email" class="form-control" name="email"
                               value="{{ old('email') }}">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Password</label>

                    <div class="col-md-6">
                        <input type="password" class="form-control" name="password">
                    </div>
                </div>

                <div class="form-group{{ $errors->has('password_confirmation') ? ' has-error' : '' }}">
                    <label class="col-md-4 control-label">Confirm Password</label>

                    <div class="col-md-6">
                        <input type="password" class="form-control" name="password_confirmation">
                    </div>
                </div>

            </div>

            <div class="modal-footer">
                <div class="form-group">
                    <div class="col-md-6 col-md-offset-2">
                        <button name="RegisterButton" type="submit" class="btn btn-primary">
                            <i class="fa fa-btn fa-user"></i> Register
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

When I submit, the modal closes and nothing happens. If I click on “register” again, the modal shows with the errors showing.

Could someone help me out? Point me in the right direction?

Answer

As far as I understand this, you’re submitting your form normally, which reloads the page. So after the page reloaded, you need to click on “register” again, to open the modal, which correctly shows any errors.

If you want to submit the form normally like this, you have to reopen the modal automatically (using Javascript), if there’s any error. You can open a modal like this:

$('#modal').modal({show: true});

I hope I understood your problem correctly.

EDIT 1: to open the modal if there is an error, use the following code:

@if(Session::has('errors'))
<script>
$(document).ready(function(){
    $('#modal').modal({show: true});
}
</script>
@endif

EDIT 2: To submit the form via AJAX and display the errors in the modal directly:

<?php

public function register()
{
    ...

if($Validator->fails())
{
    $json = new stdClass();
    $json->success = false;
    $json->errors = $Validator->errors();
}
else
{
    $json = new stdClass();
    $json->success = true;
}

return Response::json($json);
}

?>


<script>
$('#registerForm').submit(function(){

var url = {{ route('myRegisterRoute') }};
var data = $('#registerForm').serialize();

$.post(url, data, function(response){
    if(response.success)
    {
        // Print success message and close modal
    }
    else
    {
        $('#registerForm errorList').html(JSON.stringify(response.errors));
    }
});

// return false to stop the normal submission
return false;
});
</script>