在Vue/Laravel应用中实现Bootstrap模态框打开前的输入字段验证

<!-- 原有表单 -->
<form name="add_accessory" 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>

// Vue.js script
var app = new Vue({
    el: '#app',
    mounted: function() {
        // 初始化 flatpickr，确保日期输入框功能正常
        flatpickr(".flatpickr", {
            dateFormat: "Y-m-d", // 根据你的需求设置日期格式
            onChange: (selectedDates, dateStr, instance) => {
                // 更新 Vue data 中的 request_date
                this.form.request_date = dateStr;
            }
        });
    },

    data() {
        return {
            stores: {!! $stores !!},
            users: {!! $users !!},
            form: {
                user_id: '',
                request_date: '',
                store_id: '',
                type: '',
                description: ''
            },
        }
    },
    methods: {
        AddAccessory() {
            // 获取名为 'add_accessory' 的表单中的所有元素
            // 使用 [].slice.call 将 NodeList 转换为数组，以便使用 map 方法
            const formElements = [].slice.call(document.forms.add_accessory.elements);

            // 检查所有元素的有效性
            // map 方法对每个元素调用 checkValidity()，返回一个布尔值数组
            // filter 方法筛选出无效的元素（即 checkValidity() 返回 false 的元素）
            // 如果筛选后的数组长度为 0，则表示所有元素都有效
            const isValid = formElements.map((el) => {
                return el.checkValidity();
            }).filter((v) => v === false).length === 0;

            if (isValid) {
                // 如果表单验证通过，则显示模态框
                $('#accessory').modal('show');
            } else {
                // 如果验证失败，可以添加用户提示，例如触发浏览器默认的验证提示
                // 或者手动显示错误消息。
                // 浏览器通常会在调用 checkValidity() 后自动显示提示。
                // 为了确保提示可见，可以尝试触发一次提交事件，或者聚焦到第一个无效字段。
                console.log('表单验证失败，请检查必填项。');
            }
        },
        CreateAccessory() {
            // 注意：这里需要确保模态框内的表单字段也正确地绑定了 v-model
            // 并且 axios.post 的数据结构与后端期望的一致
            axios.post('/accessory/store', {
                data: this.form, // 确保 this.form 包含了模态框内的数据
            })
            .then(response => {
                // 处理成功响应，例如关闭模态框，刷新数据等
                $('#accessory').modal('hide'); // 关闭模态框
                // $(location).attr('href', '/cashoutdetails'); // 根据需求跳转页面
            })
            .catch(function (error) {
                // 处理错误响应
                console.error('保存失败:', error);
                alert('保存失败，请重试！');
            });
        }
    }
});