CODEWITHSUNDEEP
laravellaravel-8
Aurilie
Aurilie

Reputation: 199

Getting a modal to pop up when validation is false

I'm trying to create a page that when you click on add product button a modal pops up with a form that gets filled out. What I'm trying to do is after you've submitted the form and there are errors then I would like for it to redirect back and have the modal popup with the error messages.

Here is my code

My controller

public function  addProduct(Product $product)
{
    $validator = Validator::make(request()->all(), [
        'title' => 'required'
    ]);

    if($validator->fails())
    {
        return redirect()->back()->with([
            'errors' => $validator->errors()
        ])
    }
}

My blade file

<button type="button" class="btn btn-sm btn-success" data-toggle="modal" data-target="#addProductModal">
    <i class="fa fa-plus"></i> Add Product
</button>

@include('admin.product.add-product')

and this is my modal

<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addProductModalLabel">Add a Product</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <form action="{{ route('admin.product.addProduct') }}" method="post">
                @csrf

                <div class="modal-body">
                    <div class="form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" class="form-control">
                    </div>
                </div>
    
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-success">Save changes</button>
                </div>
            </form>
        </div>
    </div>
</div>

Upvotes: 1

Views: 1608

Answers (2)

Maji Mazuri
Maji Mazuri

Reputation: 55

You can use this also.

<!-- Test if validation failed; hence show modal -->

@if($errors->getBag('default')->first('name') != '')
<script type="text/javascript">
    $(document).ready(function(){
        $("#addProductModal").modal('show');
    });
</script>
@endif

Upvotes: 0

Marinario Agalliu
Marinario Agalliu

Reputation: 1179

You can achieve that using sessions.

I'm using Form Requests for validation, and in my CreateCategoryRequest I added:

public function withValidator($validator)
{
    if ($validator->fails()) {
        \Session::flash('create_category_error', 'Create category validation failed!');
    }

}

In blade:

@if (session('create_category_error'))      
<script type="text/javascript">
    $('#myModal').modal('show');
</script>
@endif

Yes it's that simple :P

Happy coding!

Upvotes: 2

Related Questions