触发HTML5表单验证

Question

我有一个包含几个不同字段集的表单.我有一些Javascript,一次一个地向用户显示字段集.对于支持HTML5验证的浏览器,我很乐意使用它.但是,我需要按照我的条件这样做.我正在使用JQuery.

当用户单击JS链接以移动到下一个字段集时,我需要在当前字段集上进行验证,并阻止用户在出现问题时继续前进.

理想情况下,当用户失去对元素的关注时,将进行验证.

目前无效并使用Javascript.宁愿使用本机方法.:)

Answer 1

TL; DR:不关心旧浏览器吗？使用form.reportValidity().

需要传统浏览器支持？继续阅读.

它实际上是可以手动触发验证.

我将在答案中使用纯JavaScript来提高可重用性,不需要jQuery.

假设以下HTML表单:

<form>
  <input required>
  <button type="button">Trigger validation</button>
</form>

让我们在JavaScript中抓取我们的UI元素:

var form = document.querySelector('form')
var triggerButton = document.querySelector('button')

不需要支持Internet Explorer等传统浏览器吗？这个给你.

所有现代浏览器都支持元素reportValidity()上相对较新的方法form.

triggerButton.onclick = function () {
    form.reportValidity()
}

就是这样,我们完成了.此外,这是一个使用这种方法的简单CodePen.

旧浏览器的方法

在哪里reportValidity()不受支持,我们需要稍微欺骗浏览器.那么,我们会做什么？

1. 通过致电检查表格的有效性reportValidity().这将告诉我们表单是否有效,但不显示验证UI.
2. 如果表单无效,我们会创建一个临时提交按钮并触发单击它.由于表单无效,我们知道它实际上不会提交,但是,它会向用户显示验证提示.我们将立即删除临时提交按钮,因此用户永远不会看到它.
3. 如果表单有效,我们根本不需要干涉并让用户继续.

在代码中:

triggerButton.onclick = function () {
  // Form is invalid!
  if (!form.checkValidity()) {
    // Create the temporary button, click and remove it
    var tmpSubmit = document.createElement('button')
    form.appendChild(tmpSubmit)
    tmpSubmit.click()
    form.removeChild(tmpSubmit)

  } else {
    // Form is valid, let the user proceed or do whatever we need to
  }
}

这段代码几乎适用于任何常见的浏览器(我已经成功测试了IE11).

这是一个有效的CodePen示例.

我假设OP的问题在这么多年后不再存在,但是对于每个具有相同用例(多页面形式)的人:确保以某种方式禁用表单当前隐藏部分中的元素,因为验证不可见字段将导致在浏览器中出错.

Answer 2

您无法触发本机验证UI,但您可以轻松利用任意输入元素上的验证API:

$('input').blur(function(event) {
    event.target.checkValidity();
}).bind('invalid', function(event) {
    setTimeout(function() { $(event.target).focus();}, 50);
});

第一事件触发checkValidity的每个输入元件上,只要它失去焦点,如果元素是invalid那么相应的事件将被发射和由所述第二事件处理程序捕获.这个将焦点放回元素,但这可能非常烦人,我假设你有一个更好的解决方案来通知错误. 这是我上面代码的一个工作示例.

Answer 3

在某种程度上,您可以通过triggerHTML5格式验证并向用户显示提示而无需提交表单!

两个按钮,一个用于验证,一个用于提交

onclick在validate按钮上设置一个侦听器以设置一个全局标志(例如justValidate),以指示此单击旨在检查表单的验证.

并onclick在提交按钮上设置一个侦听器,将justValidate标志设置为false.

然后在onsubmit表单的处理程序中,检查标志justValidate以确定返回值并调用preventDefault()以停止提交表单.如您所知,HTML5表单验证(以及对用户的GUI提示)是在onsubmit事件之前执行的,即使表单是VALID,您也可以通过返回false或调用来停止表单提交preventDefault().

并且,在HTML5中,您有一种方法来检查表单的验证:form.checkValidity()然后您可以知道表单是否在您的代码中验证.

好的,这是演示:http: //jsbin.com/buvuku/2/edit