Skip to content

WordPress留言表单增加前端验证

今天在测试留言表格时,发现WordPress标准的留言表格并没有在前端做表单验证,不能说这个不好,因为像W3C的网站用户登陆表单也是通过后端验证的。不过考虑到现在的SPA(single page application)网站将用户培养成习惯在前端做表单验证了。

我在查看WordPress代码时,后发现在form元素上面有添加了一个novalidate属性,这个属性就是告诉浏览器跳过前端验证。

因为源码并没有提供filter来修改这个属性,那么可以通过JavaScript将这个属性删掉,删掉后表单自然就拥有前端验证了。

首先,加载一个JavaScript文件。

wp_enqueue_script( 'validate-comment-form', get_template_directory_uri() . '/js/validate-comment-form.js', [], 1.0, true );

然后在项目文件夹中添加这个JavaScript文件即可。

document.addEventListener('DOMContentLoaded', () => {
   const commentForm = document.querySelector('#commentform');
   if (!commentForm) return;
   commentForm.removeAttribute('novalidate');
});

现在你试下点击底部的发表评论按钮,就会看到前端验证了。

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注