Blogless

Background

reCAPTCHA is a free CAPTCHA service that helps to digitize books.

A CAPTCHA is a program that can tell whether its user is a human or a computer, by asking the user to copy some distorted text. You’ve probably seen them, either here, or elsewhere on the web. If not, just click here for an example.

The Internet Archive is going to help Spidey enter "the digital age".

reCAPTCHA gets these words from books that the Internet Archive is digitizing. Digitizing books is done by photographically scanning the book’s pages, and then transforming these scans into text using “Optical Character Recognition” (OCR).

All this together means that when you leave a comment, in addition to contributing to the discussion, you are both proving you are a person, not a spambot, and helping humanity’s effort to archive it’s knowledge digitally.

The Problem

Which is all milk and honey, but there’s a problem. As good citizens of the web, and as Wordpress users, BlogLESS utilizes reCAPTCHA’s handy Wordpress Plugin. But, as good citizens, BlogLESS is further committed to web standards. This means that all our HTML and CSS needs to be valid. Unfortunately, the Wordpress reCAPTCHA plugin doesn’t validate XHTML out of the box. (As it turns out, this is not its fault. It actually can’t validate out of the box, which we’ll see.)

The good news is, the fix is easy, once you understand the problem. You don’t need to be a pro to make your Wordpress comments template valid again.

The Fix

First, you’ll need to find the php files that write the reCAPTCHA to your comments template. They are two, although the file names changed between versions. I’ve checked against the lastest (v2.91), and the oldest version I could find (v2.5). If your version is somewhere in the middle of the two, you’ll have to extrapolate a little, but it shouldn’t be hard.

Anyhow, both versions have a file called recaptchalib.php. Version 2.5 has a second file called recaptcha.php, which changed to wp-recaptcha.php by 2.91. In any case, they should both be found in a directory that looks something like this:

Error the first

By 2.6, reCAPTCHA fixed this first error, so if you’re up-to-date, you can skip this step and move on to Error the second below. However, if you’re using 2.5, the fix is very easy. Open recaptchalib.php, and locate lines 126 to 130. These lines contain a complete <noscript> block. Find it and replace it with the following:

	<noscript>
  		<iframe src="'. $server . '/noscript?k=' . $pubkey . $errorpart . '" height="300" width="500" frameborder="0"></iframe><br />
  		<textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
  		<input type="hidden" name="recaptcha_response_field" value="manual_challenge" />
	</noscript>';

Error the second

That one was just sloppy, and again, was fixed early in the plugin’s development. Unfortunately, the second validation failure is quite a bit more insidious. It takes place in the main plugin file ([wp-]recaptcha.php). In 2.5, find line 57. In 2.91 it’s line 431. In any case it looks like this:

	<style type='text/css'>#submit {display:none;}</style>

The w3c tells us that this error is because "The element named above was found in a context where it is not allowed. This could mean that you have incorrectly nested elements — such as a ’style’ element in the ‘body’ section instead of inside ‘head’…" Jackpot.

As it turns out, this puts us in a bit of a jam. Why? First, we’re in a noscript block, so we can’t apply this definition with Javascript (the most obvious choice). Second, the purpose of this definition is to hide a submit button that occurs in our Wordpress comments template and replace it with the one that we create on the following line (59,432) of our plugin file. This means we can’t use an plugin-scope PHP conditional.

So, the somewhat counter-intuitive way to handle this — but the only valid way you’re going to get — is to make two alterations. First, comment out the line that’s causing the trouble:

	<!--<style type='text/css'>#submit {display:none;}</style>-->

Now, open your comments template, usually:

and find the submit button (any input with id="submit"). Now what we’re going to do is actually only write the submit button for browsers that support javascript. Instead of your defacto submit button, use something like this:

	<script type="text/javascript">
		//<![CDATA[
		/* Cf. http://www.designlessbetter.com/blogless/posts/making-recaptcha-validate */
		document.write('<input name="submit" type="submit" id="submit" tabindex="5" value="Post this Comment" />');
		//]]>
	</script>

Awesome!