[英]Prevent submitting a form if at least one file is not selected
我正在使用 Vue.js 和 Axios。
我的 html 頁面上有兩個用於選擇圖像的輸入。 還有一種形式。 兩個輸入和表單是分開的和獨立的。
當我選擇圖像時，圖像會自動上傳到服務器。
挑戰是如何在至少選擇一張圖像之前無法提交表單？
告訴我怎么做？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Add Item</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<form name="addItem" method="post" action="/user/addItem">
<label for="name">name</label>
<input type="text" id="name">
<button type="submit" id="submit">Save Item</button>
</form>
<form @submit.prevent enctype="multipart/form-data">
<input type="file" ref="file1" @change="selectFile1">
</form>
<form @submit.prevent enctype="multipart/form-data">
<input type="file" ref="file2" @change="selectFile2">
</form>
</div>
<script>
const addProduct = {
name: "addProduct",
data() {
return{
file1: "",
image1:"",
file2: "",
image2: "",
}
},
methods:{
async selectFile1(){
const formData = new FormData();
this.file1 = this.$refs.file1.files[0];
formData.append('file', this.file1);
await axios.post('/user/uploadImage', formData)
},
async selectFile2(){
const formData = new FormData();
this.file2 = this.$refs.file2.files[0];
formData.append('file', this.file2);
await axios.post('/user/uploadImage', formData)
}
}
}
Vue.createApp(addProduct).mount('#app')
</script>
</body>
</html>
<form name="addItem" method="post" action="/user/addItem">
<label for="name">name</label>
<input type="text" id="name">
<button type="submit" @click="submitForm" id="submit">Save Item</button>
</form>
<script>
...
submitForm(e) {
if (!this.file1 && !this.file2) e.preventDefault()
}
...
</script>
默認情況下，您的表單submit按鈕處於disabled狀態，直到選擇了任何一個文件
第 1 步： HTML模板，如
<template>
<div id="app">
<form name="addItem" @submit.prevent="submit">
<div class="row">
<label for="name">Name</label>
<input type="text" id="name" />
</div>
<div class="row">
<input type="file" ref="file1" @change="selectFile1" />
</div>
<div class="row">
<input type="file" ref="file2" @change="selectFile2" />
</div>
<div class="row">
<button type="submit" id="submit" :disabled="!this.file1 && !this.file2">Save Item</button>
<button type="button" @click.prevent="reset">Reset</button>
</div>
</form>
</div>
</template>
第 2 步： methods如
methods: {
submit() {
if (!this.file1 && !this.file2) {
return false;
} else {
const savedata = {
name: this.name,
};
axios.post("/user/addItem", savedata);
}
},
async selectFile1() {
const formData = new FormData();
this.file1 = this.$refs.file1.files[0];
formData.append("file", this.file1);
await axios.post("/user/uploadImage", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
},
async selectFile2() {
const formData = new FormData();
this.file2 = this.$refs.file2.files[0];
formData.append("file", this.file2);
await axios.post("/user/uploadImage", formData, {
headers: { "Content-Type": "multipart/form-data" },
});
},
reset() {
this.name = "";
this.$refs.file1.value = null;
this.$refs.file2.value = null;
this.file1 = "";
this.file2 = "";
},
},
如何確保在提交多頁表單之前至少選中了一個復選框？
[英]How to make sure at least 1 checkbox is selected before submitting multipage form?
有沒有一種方法可以防止用戶在至少移動滑塊（輸入類型=范圍）之前提交表單？
[英]Is there a way to prevent the user from submitting form before s/he has at least moved the slider (input type = range)?
是否需要添加功能以確保提交多頁表單之前至少選中了一個復選框？
[英]Need to add function to make sure at least 1 checkbox is selected before submitting multipage form?
如何使用表單驗證 jquery 檢查至少一個選中的復選框？
[英]How to check at least one selected checkbox using form validation jquery?
表格是在輸入類型=文件中沒有選擇文件的提交時間
[英]Form is timeouting on submitting without selected file in input type=file
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.