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>

'''

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=+ .

Solution:

As you're not using any client side validation engine and relying on native HTML form constraints, we can continue on with the native constraints api. You can get all the elements of a form (in this case, by name) and call checkValidity on them. We can then loop each of those elements within the form to determine the validity state prior to showing our modal:

AddAccessory() {
  const valid = [].slice.call(document.forms.add_accessory.elements).map((el) => {
    return el.checkValidity()
  }).filter((v) => v === false).length === 0 

  if (valid) {
    $('#accessory').modal('show');
  }
}

Make sure to give your form element a name so it can be found correctly:

<form name="add_accessory" type="multipart/form-data"