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');
});

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