防止表单数据无效时单击多个(提交)按钮(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)的主要内容,如果未能解决你的问题,请参考以下文章