Bootstrap modal validation in Laravel

Question

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?

Stefan Pavlov · Accepted Answer · 2023-02-25 12:52:01Z

9

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>

edited Feb 25, 2023 at 12:52

Stefan Pavlov

5185 silver badges9 bronze badges

answered Jul 2, 2016 at 22:35

d33k4y

1667 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sebastian M Over a year ago

Yes. That is exactly my problem and your solution looks very good. Where should I put that javascript? How do I check for error using javascript?

Sebastian M Over a year ago

Or even better: is there a way of validating the form prior to submit?

d33k4y Over a year ago

You can put that code in the same view as your modal. See EDIT 1 for the additional check for errors.

d33k4y Over a year ago

Prior to submitting means either validation with Javascript or submitting the form via AJAX and displaying any errors with Javascript again. Both have their up- and downsides...

Sebastian M Over a year ago

Could you give me a hand with the code? It would be ideal for me that the model never closes before showing the errors, but its not a must

|

Collectives™ on Stack Overflow

Bootstrap modal validation in Laravel

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related