如何防止缓慢的表单用户体验破坏必需的属性？

发布于 2025-01-11 13:17:40 字数 471 浏览 0 评论 0原文

我有一个看起来像这样的表格：

<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>

表单的后端最多需要 10 秒才能响应（区块链！），因此禁用输入以防止多次重试。然而，它随后会破坏所需的验证，用户可以发送空的有效负载。

有什么建议可以使用 Vanilla 或者 VueJS 来防止这种情况发生吗？

非常感谢，

原文

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,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

思慕 2025-01-18 13:17:40

使用 Vuejs 你可以尝试：

@submit.prevent="action" 在表单标签中而不是 onClick....
添加异步等待和 try catch
如果你愿意，你也可以禁用提交中的按钮以确保用户无法发送空的有效负载，

这是要点代码：https://gist.github.com/jiyuuki/e6f8f7bb67b48014223d1561119ac2fa

回复收藏 0 原文

深海蓝天 2025-01-18 13:17:40

尝试使用如下所示的数据属性来控制按钮。

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>

响应到达后将 isLoading 重置为 false。

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.

回复收藏 0 原文

~没有更多了~