如果未选择至少一个文件，则阻止提交表单

Question

I am using Vue.js and Axios.我正在使用 Vue.js 和 Axios。

I have two inputs on my html page for selecting an image.我的 html 页面上有两个用于选择图像的输入。 There is also a form.还有一种形式。 The two inputs and the form are separate and independent.两个输入和表单是分开的和独立的。

When I select an image, the image is automatically uploaded to the server.当我选择图像时，图像会自动上传到服务器。

The challenge is how to make it impossible to submit the form until at least one image is selected?挑战是如何在至少选择一张图像之前无法提交表单？

Tell me how to do this?告诉我怎么做？

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

Answer 1

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

Answer 2

By default your form submit button is disabled until any one of the file has been selected默认情况下，您的表单submit按钮处于disabled状态，直到选择了任何一个文件

Step 1: HTML template like第 1 步： HTML模板，如

 <template>
  <div id="app">
    <form name="addItem" @submit.prevent="submit">
      <div class="row">
        <label for="name">Name</label>&nbsp;
        <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>&nbsp;
        <button type="button" @click.prevent="reset">Reset</button>
      </div>
    </form>
  </div>
</template>

Step 2: methods like第 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 = "";
  },
},

DEMO Link演示链接

如果未选择至少一个文件，则阻止提交表单

问题描述

2 个解决方案

解决方案1
1 已采纳 2021-10-14 07:52:17

解决方案2
1 2021-10-14 08:02:03

如果未选择至少一个文件，则阻止提交表单

问题描述

2 个解决方案

解决方案1 1 已采纳 2021-10-14 07:52:17

解决方案2 1 2021-10-14 08:02:03

解决方案1
1 已采纳 2021-10-14 07:52:17

解决方案2
1 2021-10-14 08:02:03