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,1 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­Hook2, you only have to add the fol­low­ing short­er snipped to the wp_footer hook:3

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.4 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.

Posted

in

by

Comments

Join the Discussion

Your email address will not be published. Required fields are marked *

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Rick Beckman