title: Prevent submitting a form if at least one file is not selected
body: <p>I am using Vue.js and Axios.</p>
  <p>I have two inputs on my html page for selecting an image. There is also a form. The two inputs and the form are separate and independent.</p>
  <p>When I select an image, the image is automatically uploaded to the server.</p>
  <p>The challenge is how to make it impossible to submit the form until at least one image is selected?</p>
  <p>Tell me how to do this?</p>
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
          &lt;meta charset=&quot;UTF-8&quot;&gt;
          &lt;title&gt;Add Item&lt;/title&gt;
          &lt;script src=&quot;https://unpkg.com/vue@next&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js&quot;&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div id=&quot;app&quot;&gt;
  
          &lt;form name=&quot;addItem&quot; method=&quot;post&quot; action=&quot;/user/addItem&quot;&gt;
              &lt;label for=&quot;name&quot;&gt;name&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;name&quot;&gt;
              &lt;button type=&quot;submit&quot; id=&quot;submit&quot;&gt;Save Item&lt;/button&gt;
          &lt;/form&gt;
  
  
  
          &lt;form @submit.prevent enctype=&quot;multipart/form-data&quot;&gt;
              &lt;input type=&quot;file&quot; ref=&quot;file1&quot; @change=&quot;selectFile1&quot;&gt;
          &lt;/form&gt;
  
          &lt;form @submit.prevent enctype=&quot;multipart/form-data&quot;&gt;
              &lt;input type=&quot;file&quot; ref=&quot;file2&quot; @change=&quot;selectFile2&quot;&gt;
          &lt;/form&gt;
  
  
  
      &lt;/div&gt;
  
  
      &lt;script&gt;
  
          const addProduct = {
  
              name: &quot;addProduct&quot;,
  
              data() {
                  return{
                      file1: &quot;&quot;,
                      image1:&quot;&quot;,
  
                      file2: &quot;&quot;,
                      image2: &quot;&quot;,
                  }
              },
  
              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')
      &lt;/script&gt;
  
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>