HTML使用setCustomValidity在表单中需要两次点击才能提交

在HTML中，setCustomValidity方法用于设置或更改表单元素的验证状态，当表单元素不符合其pattern属性、min、max等属性的值或者required属性为true时，可以通过调用setCustomValidity方法来设置自定义的验证错误信息，有时候在使用setCustomValidity方法后，用户需要点击两次才能提交表单，这是为什么呢？

创新互联自2013年起，先为迁西等服务建站，迁西等地企业，进行企业商务咨询服务。为迁西企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

要解决这个问题，我们需要了解浏览器的验证机制以及setCustomValidity方法的工作原理，当表单元素触发input事件或者失去焦点时，浏览器会检查该元素是否符合其验证规则，如果不符合，浏览器会将该元素的validity属性设置为false，并显示自定义的错误信息（如果有的话），此时，用户需要点击提交按钮才能提交表单。

那么为什么用户需要点击两次才能提交表单呢？原因在于浏览器的默认行为和我们自定义的提交按钮的行为之间的冲突，当表单元素的验证状态为false时，浏览器会自动阻止表单的提交，而我们自定义的提交按钮通常会在点击时执行一些额外的操作，例如验证其他表单元素或者发送Ajax请求，这些额外的操作可能会导致浏览器重新验证表单元素，从而使得用户需要再次点击提交按钮。

为了解决这个问题，我们可以使用以下两种方法之一：

1、使用JavaScript监听表单的submit事件，并在事件处理函数中手动调用表单的submit()方法，这样可以避免浏览器自动阻止表单的提交，从而使得用户只需要点击一次提交按钮即可。

document.querySelector('form').addEventListener('submit', function(event) {
  // 在这里添加额外的验证逻辑
  event.preventDefault();
  this.submit();
});

2、使用CSS样式隐藏浏览器默认的提交按钮，并提供一个自定义的提交按钮，这样可以避免浏览器自动阻止表单的提交，从而使得用户只需要点击一次自定义的提交按钮即可。

  
  提交
  自定义提交

在使用setCustomValidity方法时，如果发现用户需要点击两次才能提交表单，可以尝试使用上述两种方法之一来解决，我们还需要注意确保表单元素的验证规则正确无误，以避免给用户带来不必要的困扰。

标题名称：HTML使用setCustomValidity在表单中需要两次点击才能提交
分享URL：http://www.shufengxianlan.com/qtweb/news10/1510.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联