php - Applying Validation to Input field before opening Bootstrap Model in Vue Laravel

This is my laravel blade page content of

<!-- Main Container -->
<main id="main-container">

    <!-- Page Content -->
    <div class="content" id="app">
        <!-- Lock Forms -->
        <!-- <h2 class="content-heading">Add Accessory</h2> -->
        <!-- Register Forms -->
        <div class="row">
            <div class="col-md-12">
                <!-- Bootstrap Register -->
                <div class="block block-themed">
                    <div class="block-header bg-gd-dusk">
                        <h3 class="block-title">Add Accessory</h3>
                    </div>
                    <div class="block-content">
                        @include('errors.error')
                        <form enctype="multipart/form-data">  
                            @csrf
                            <div class="form-group row">
                                <div class="col-12">
                                    <label>Select Store</label>
                                    <select class="form-control" name="store_id" v-model="form.store_id" required>
                                       <option v-for="store in stores" :key="store.id" v-bind:value="store.id">@{{store.channel_id}}</option>
                                    </select>   
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <label>Requested Date</label>
                                    <input type="text" class="flatpickr form-control" v-model="form.request_date" name="request_date" required> 
                                </div>
                            </div>
                            <div class="form-group row">
                                <div class="col-12">
                                    <button type="button" @click="AddAccessory()" class="btn btn-primary">Add New Accessory</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- END Bootstrap Register -->
            </div>
        </div>
    </div>
    <div class="modal fade" id="accessory" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">Add Accessory Details</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form @submit="CreateAccessory()" enctype="multipart/form-data">
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-12">
                            <label>Choose Accessory Type</label>
                            <select class="form-control" name="type" required>
                                <option>Case</option>
                                <option>Projector</option>
                                <option>Glass</option>
                                <option>Charger</option>
                            </select>   
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-12">
                            <label>Description</label>
                            <textarea class="form-control" name="description" placeholder="Enter Description"> </textarea> 
                        </div>
                    </div>
                </div>
            
                <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-primary">Save changes</button>
                </div>
            </form>
          </div>
        </div>
      </div>
    
</main>
<script>

    var app = new Vue({
        el: '#app',
        mounted: function() {
        },

        data() {
            return {
                stores: {!! $stores !!},
                users: {!! $users !!},
                form: {
                    user_id: '',
                    request_date: '',
                    store_id: '',
                    type: '',
                    description: ''
                }, 
            }  
        },
        methods: {
            AddAccessory() {
                $('#accessory').modal('show');
            },
            CreateAccessory() {
                axios.post('/accessory/store',{
                    data: this.form,
                })
                .then(response => {
                    //$(location).attr('href', '/cashoutdetails')
                })
                .catch(function (error) {
                    alert('Error');
                });
            }
        }
    })
    
    </script>
Copy code

'''

In web.php, this is my route --

Route::post('accessory/store','AccessoryController@store');

My Issues are --

1. I want to open my bootstrap model only if my input fields of store id and date is being filled by user but where as it is opening in all cases whenever i click on add accessory button. Please suggest !!
2. accesssory/store route is not working ... whenever i click on submit button of model, it takes me to this page --- /accessory/create?type=Case&description=+ .

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.