防止表单数据无效时单击多个（提交）按钮（vee-validate）答案

【问题标题】：Prevent from onClick on multiple (submit) buttons when form data are invalid (vee-validate)防止表单数据无效时单击多个（提交）按钮（vee-validate）
【发布时间】：2021-12-29 19:06:10
【问题描述】：

如果某些输入无效（使用 vee-validate ValidationObserver），我如何防止调用 onClick 事件on button。我需要这个按钮而不是表单，因为我有多个按钮（调用不同的方法或使用不同的参数），只有在数据有效时才应该执行。

片段以便更好地理解：

<validation-observer ref="myValidator">
  <form>
    <validation-provider rules="required" v-slot="{ errors }">
      <input type=”text”>
    </validation-provider>
    <validation-provider rules="required" v-slot="{ errors }">
      <input type=”text”>
    </validation-provider>
    <button onClick=”if inputs are valid call method1”>
    <button onClick=”if inputs are valid call method2”>
  </form>
</validation-observer>

是否有“内置”或比在 onClick 方法中的代码（如 this.$refs.resCodesValidator.validate()）中测试 ValidationObserver 更好的解决方案？

【问题讨论】：

标签： javascript vue.js validation submit

【解决方案1】：

是的。 https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation

<form>
  <label for="fname"> name (required)</label>
  <input id="fname" name="fname" required>
  <label for="choose">Would you prefer a banana or a cherry?</label>
  <input id="choose" name="i_like" required pattern="[Bb]anana|[Cc]herry">
  <button>Submit</button>
</form>

【讨论】：