Question

我们最近开始在out表单上添加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对象）的有效性。

另外，提醒您始终记住包括服务器端验证 - 无论您的客户端方法如何。这是您控制的唯一环境，可以依赖它来执行而不会被用户篡改。

客户端验证事件和UI阻止

1 个答案: