在Vue Laravel中打开Bootstrap模型之前对输入字段应用验证

Question

这是我的游记页内容

<!-- 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>

"

在web.php中，这是我的路由——

路线::文章("附件/存储","AccessoryController@store");

My Issues are——

1. 我想打开我的引导模型只有当我的商店id和日期的输入字段是由用户填充，但它是在所有情况下打开每当我点击添加配件按钮。请建议!!
2. 附件/存储路由不工作…每当我点击模型的提交按钮，它就会带我到这个页面——/accessory/create?type=Case&description=+ .

Answer 1

由于您没有使用任何客户端验证引擎，而是依赖于本地HTML表单约束，因此我们可以继续使用本地约束api。您可以获取表单的所有元素(在本例中，通过名称)并对它们调用checkValidity。然后，我们可以循环表单中的每个元素，在显示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');
}
}

确保给你的表单元素一个名字，这样它可以被正确地找到:

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