客户端验证事件和 UI 阻止

Client side validation events and UI blocking

本文关键字：UI 阻止 事件 验证 客户端      更新时间：2023-09-26

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

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

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

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

很

抱歉没有发现您使用的是本机HTML验证而不是JavaScript验证。这在问题中很清楚，但是，在通读并快速添加评论时，我显然被其他事情分散了注意力。

您已经从链接的问题中找到了无效事件，但可能比取消绑定提交处理程序更好的解决方案（然后需要重新绑定才能在用户更正错误并重新提交时产生任何效果）。

您可以使用 ：invalid 伪类/选择器在提交处理程序中检查表单，并确保所有输入在显示覆盖之前都有效。这也可以在样式表中用于直观地突出显示错误字段。脚本看起来像——

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/

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

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

相关文章：