catalyph's avatar

Keep Bootstrap Modal Open until Laravel backend Verify

I have a signup form built that pops up a Bootstrap 5 modal. simple setup no java just calling the modal to open using:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalSignup">Sign-up</button>

for for is supposed to validate on the backend before storing in the database, the issue is, when I click on submit button the modal closes and I cant verify if the fields entered were good.

has anyone used BS5 modal on a submit form before and know how to verify and show errors before the modal closes ?

0 likes
2 replies
Snapey's avatar

The modal closes because the whole page is reloaded with any validation errors. There is nothing you can do about this.

What you are looking for is javascript that re-opens the modal automatically if the page contains signup errors

1 like
jlrdw's avatar

Also have you tried livewire?

And if you use ajax, see this post:

https://laracasts.com/discuss/channels/laravel/old-input-not-working-when-using-ajax-drop-down-dependent-list

Don't redirect away and old data remains, see also @artcore answer:

Simply don't redirect back if you're using ajax and all inputs will remain.

When using ajax I return errors as json and display in a division.

Yes a learning curve involved, but worth learning how to deal with it.

Edit:

Also a good video and something I have used even before laravel is server fetched partials. This video is from the creator of livewire: https://laracasts.com/series/javascript-techniques-for-server-side-developers/episodes/1

I extend this and put all in an object (similar to an iframe) when needed.

Of course @snapey gave the answer to get you going, but just a suggestion to start learning Javascript and Ajax or livewire. I use Javascript and Ajax (fetch js).

1 like

Please or to participate in this conversation.