Enabling Form Validation on WordPress Comments

For over a decade, Rick Beck­man has accu­mu­lat­ed com­ments from a wide vari­ety of peo­ple — many who have post­ed con­fi­dent­ly using their real name and what seem like valid email address­es while oth­ers have cho­sen anonymi­ty with pseu­do­nyms and pret­ty obvi­ous­ly fake email addresses.

The web­sites entered with the com­ments have been just as var­ied — from links to per­son­al sites that match the rest of the infor­ma­tion giv­en (name, email address) to links to Google to strings which don’t resem­ble a valid web­site address at all. You know what I mean: “none,” “http://no,” “na,” and so on. Users for what­ev­er rea­son don’t want to leave the field emp­ty (even though it isn’t required), so they put in some invalid data if they don’t have a website. 

Word­Press does­n’t val­i­date these strings — the email address, the web­site address — when the user tries to sub­mit a com­ment. In fact, the only time val­i­da­tion occurs is after the user sub­mits the com­ment and the page refresh­es. If a poor­ly formed email address was sub­mit­ted, Word­Press catch­es it; how­ev­er, the web­site field isn’t val­i­dat­ed, allow­ing invalid address­es to make it through.

How­ev­er, if you want to enforce val­i­da­tion using HTML5’s form val­i­da­tion fea­tures,¹ you can do so by adding an incred­i­bly sim­ple snip­pet of code to either your site func­tion­al­i­ty plu­g­in or your the­me’s appro­pri­ate cus­tom func­tions 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 Open­Hook², you only have to add the fol­low­ing short­er 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 sav­ing your Open­Hook options.

After adding the code, users in sup­port­ing browsers will not be able to sub­mit the form if they’ve pro­vid­ed mal­formed email or web­site addresses.

Caveats

Word­Press explic­it­ly dis­ables brows­er-based val­i­da­tion on the com­ment form fields due to con­cerns regard­ing valid inter­na­tion­al­ized domain names being blocked in cer­tain browsers.⁴ This is a con­cern you have to weigh for your­self if you elect to enable validation.

Sec­ond, this val­i­da­tion only ensures that address­es of a prop­er struc­ture are sub­mit­ted; it does­n’t do any­thing to val­i­date whether the address­es are actu­al­ly real email address­es and websites.

Final­ly, as this is an HTML5 fea­ture, it will only work in Word­Press themes which explic­it­ly sup­port HTML5.

1. You may want to weigh brows­er sup­port for this fea­ture before fret­ting too much about it.
2. If you are, thank you!
3. Make sure to enable PHP on the hook before sav­ing your Open­Hook options.
4. As men­tioned in, for exam­ple, this com­mit mes­sage.