防止表单数据无效时单击多个(提交)按钮(vee-validate)

Posted

技术标签:

【中文标题】防止表单数据无效时单击多个(提交)按钮(vee-validate)【英文标题】:Prevent from onClick on multiple (submit) buttons when form data are invalid (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 更好的解决方案?

【问题讨论】:

【参考方案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>

【讨论】:

以上是关于防止表单数据无效时单击多个(提交)按钮(vee-validate)的主要内容,如果未能解决你的问题,请参考以下文章

单击按钮时如何防止表单提交? [复制]

Symfony2 防止多个表单提交

如何防止在 PHP 中多次单击时提交多个表单

点击返回按钮时防止重新提交表单

在 wordpress 中编码时防止双重表单提交

如何使用 jQuery 提交多个表单数据?