客户端验证事件和 UI 阻塞

Question

我们最近开始在表单上添加 HTML 5 客户端验证。

我遇到的一个有趣的副作用是这个。对于某些表单，我们会在提交表单时创建一个带有加载指示器的叠加层。这样做是为了保护表单免受多次提交。它看起来也很酷。

但是，当 HTML 5 客户端验证事件发生时，例如需要，触发提交处理程序，并且覆盖显示，但客户端验证的 b/c 表单实际上并未提交并且您被卡住了。

现在，我想避免在 Javascript 中重做这种客户端验证。是否有任何类型的事件表明发生了客户端验证异常？这样，我可以根据该事件禁用覆盖。

Answer 1

很抱歉未能得知您使用的是原生 HTML 验证而不是 JavaScript 验证。这在问题中很清楚，但是在阅读并快速添加评论时，我显然被其他东西分心了。

您已经从链接的问题中找到了invalid event，但可能有比取消绑定提交处理程序更好的解决方案（当用户更正他们的问题时，需要重新绑定以产生任何效果）错误并重新提交）。

您可以使用:invalid psuedo-class/selector 在提交处理程序中检查表单，并确保所有输入在显示覆盖之前都有效。这也可以在您的样式表中使用，以直观地突出显示错误字段。脚本看起来像-

function onFormSubmit (event) {
    console.log('Submit event fired');

    //Validation check - could use jQuery for selectors to avoid need to check querySelectorAll availability

    if ('querySelectorAll' in document) {
        var sampleForm = document.getElementById('sample-form');

        var invalidElements = sampleForm.querySelectorAll('input:invalid');

        if (invalidElements.length > 0) {
            event.preventDefault(); //Not really required - browser will stop submit
            alert('Validation failed');
            return;
        }

        //Your code - overlay
    }

    alert('Form submitted');
}

见http://jsfiddle.net/pwdst/6b2Gd/1/

如果您有一个相当小的表单，也可以检查输入控件的单个validity.valid 属性，如果这对您的应用程序上下文有帮助，它还将提供有关错误的更多信息。您需要选择并循环遍历表单输入元素，或者使用 jQuery/Sizzle/querySelectors，单独检查 DOM 元素（不是 jQuery 对象）的有效性。

顺便提醒一下，无论您的客户端方法如何，都要记住包括服务器端验证。这是您控制的唯一环境，可以依赖它来执行并且不会被用户篡改。