I have a form that looks like:

<form method="POST">
<label>Your name:
<input name="name" required>
</label>
<input type="submit" onclick="this.form.submit(); this.disabled=true; this.value='Sending…';">
</form>

The form's backend takes upto 10 seconds to respond (blockchain!), hence the disabled input to prevent multiple retries. However it then breaks the required validation and users can send in empty payloads.

Any tips how to prevent this using Vanilla or maybe VueJS?

Many thanks,

CodePudding user response：

Using Vuejs you can try :

1. @submit.prevent="action" in form tag instead of onClick....
2. add async await with try catch
3. if you want you can also disable your button in submit to be sure users can't send an empty payloads

here's a gist code : https://gist.github.com/jiyuuki/e6f8f7bb67b48014223d1561119ac2fa

CodePudding user response：

Try to control the button with a data property like below.

export default {
  name: 'Form',
  data() {
    return {
      isLoading: false,
    }
  },
  methods: {
    async submitForm() {
      this.isLoading = true;
      await this.form.submit(); // Assuming this is where you make the time taking call
      this.disabled=true;
      this.value='Sending…';
    }
  }
  
}

<form method="POST">
  <label>Your name:
<input name="name" required>
</label>
  <input  
  :disabled="isLoading"
  type="button" 
  @click="submitFrom">
</form>

Reset the isLoading to false after the response reaches.