Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

barantr90's avatar

Laravel 5.x and Bootstrap 4.3 handling with tabs and form

I have two tabs. Status and Multimedia. Users can share status or multimedia. I am trying to use just one form. How can I handle with tabs and validations? What is the logic of this? Thank you guys.

https://ibb.co/DtpPfnN "Screenshot"

I am using Laravel 5.8 and Bootstrap 4.3 (This form is just an example and I am trying.)

<form method="POST" action="{{ route('test') }}">
    @csrf
        <div class="tab-content" id="nav-tabContent">
            <div class="tab-pane fade show active" id="nav-status" role="tabpanel" aria-labelledby="nav-status-tab">
                 <div class="form-group">
                     <textarea class="form-control" id="status" rows="3" name="content1"></textarea>
                 </div>
             </div>

            <div class="tab-pane fade" id="nav-multimedia" role="tabpanel" aria-labelledby="nav-multimedia-tab">
                <div class="form-group">
                    <textarea class="form-control" id="multimedia" rows="3" name="content2"></textarea>
                </div>
             </div>

             <button class="btn btn-outline-success" type="submit">Send</button>
     </div>
</form>
0 likes
4 replies
psylogic's avatar

I would use tabs as wizard form, to submit all the data.

In your case is to have each tab with submit button, Or you will have to do more logic in your controller which is not useful if you want to submit all the inputs..

hollyit's avatar

I agree with @psylogic - go with a wizard. The problem you get with tabbed forms is a usability problem. If your validation fails on say a middle tab, you need to come up with a way to show that tab. Even worse, you got validation problems on more than one tab. You need a way to show that, unless you expect the user to click through all tabs.

If it were me, I would do all of this inside of Vue. You can validate each step, then move on and store all the data in the browser, submitting it once it all validates. The other way is to submit each step to the server, validate data and either show the error for that step, or store it with the session. Then in the final step get all your data from the session and do what you want with it. This is actually easier than it sounds, unless you're dealing with uploads in one of the steps that need stored in sessions. Then you got to come up with a temp file system to save the file and move it, etc. on the final step. You also need to figure out a way to clear out temp files that are on your disk and the form was never completed. That's why going with Vue is a lot simpler.

1 like
barantr90's avatar

Thank you for your help @psylogic @hollyit but users can share status or multimedia. They wont both of them. Should I use different form on different tab or using just one form and handle the data with hidden input etc?

hollyit's avatar

@BARANTR90 - If that's all you're doing, then the easiest and best method would be 2 different forms, each under it's own tab, each going to their own route. There's nothing stopping you from having more than one form on a page, and doing a route for status and a different one for media makes it extremely easy, plus makes it easier to handle other things like validation.

Please or to participate in this conversation.