Enabling Form Validation on WordPress Comments

For over a decade, The Cerulean Standard has accumulated comments from a wide variety of people — many who have posted confidently using their real name and what seem like valid email addresses while others have chosen anonymity with pseudonyms and pretty obviously fake email addresses.

The websites entered with the comments have been just as varied — from links to personal sites that match the rest of the information given (name, email address) to links to Google to strings which don’t resemble a valid website address at all. You know what I mean: “none,” “http://no,” “na,” and so on. Users for whatever reason don’t want to leave the field empty (even though it isn’t required), so they put in some invalid data if they don’t have a website. 

WordPress doesn’t validate these strings — the email address, the website address — when the user tries to submit a comment. In fact, the only time validation occurs is after the user submits the comment and the page refreshes. If a poorly formed email address was submitted, WordPress catches it; however, the website field isn’t validated, allowing invalid addresses to make it through.

However, if you want to enforce validation using HTML5’s form validation features,¹ you can do so by adding an incredibly simple snippet of code to either your site functionality plugin or your theme’s appropriate custom functions file:

/**
 * Enable form validation
 */
function custom_enable_comment_form_validation() {
	if ( comments_open() && current_theme_supports( 'html5' ) ) {
		echo '<script>document.getElementById("commentform").removeAttribute("novalidate");</script>' . PHP_EOL;
	}
}
add_action( 'wp_footer', 'custom_enable_comment_form_validation' );

If you’re using OpenHook², you only have to add the following shorter snipped to the wp_footer hook:³

if ( comments_open() && current_theme_supports( 'html5' ) ) {
	echo '<script>document.getElementById("commentform").removeAttribute("novalidate");</script>' . PHP_EOL;
}

Make sure to enable PHP on the hook before saving your OpenHook options.

After adding the code, users in supporting browsers will not be able to submit the form if they’ve provided malformed email or website addresses.

Caveats

WordPress explicitly disables browser-based validation on the comment form fields due to concerns regarding valid internationalized domain names being blocked in certain browsers.⁴ This is a concern you have to weigh for yourself if you elect to enable validation.

Second, this validation only ensures that addresses of a proper structure are submitted; it doesn’t do anything to validate whether the addresses are actually real email addresses and websites.

Finally, as this is an HTML5 feature, it will only work in WordPress themes which explicitly support HTML5.

1. You may want to weigh browser support for this feature before fretting too much about it.
2. If you are, thank you!
3. Make sure to enable PHP on the hook before saving your OpenHook options.
4. As mentioned in, for example, this commit message.