Unusable comment error pages

[foolswisdom]

No comment error page requires browser navigation to leave

ENV: WP trunk r5486

While viewing a post, I click Submit Comment without entering any information and the result is (wp-comments-post.php):

WordPress
Error: please type a comment.

Dead end: no link back to the page where I meant to comment or maybe accidentally clicked the button, and "Error:" makes me feel stupid ;-)

POSSIBLE SOLUTION

I don't see any reason to navigate away from the post post.

ADDITIONAL DETAILS

Assuming the error page is desirable (sure hope not), being able to style it might be useful.

[markjaquith]

We have the comment form hook. We could pass on an error number that is handled by the comment form hook and translated into a user-friendly message. We could also put in some JS that does client-side validation.

[f00f]

I like the JS idea. Disable the submit button and re-enable it when all required fields are filled.

[markjaquith]

Seems like a good idea for 2.4

[janbrasna]

Either the JS solution or a full WP page describing the error should be present. These blank error pages are neither usable nor helpful.

BTW see the discussion here #7890 (plus #7246 and #6076).

We should find a consensus how to approach all such error messages.

[scohoust]

How about something like ​this? For those with javascript disabled maybe add in a back link to that error page?

[shamess]

I decided to try fixing this myself, just to see if I could. Turns out I sort of have it; on comment submit, instead of using wp_die() to give the error messages, I just redirected back to the post, passing it an error code. That error code is rendered by the action "comment_form_errors" which template designers will have to implement themselves. "comment_form_errors" echos the error text.

This doesn't use javascript at all, so there's no problem with worrying about them having it disabled. I figured Javascript should supplement a server side error response, not entirely replace it anyway.

There are a few things that I don't like about this way though:

• It relies on the template designer to add the action before the poster can see their errors. A lot of themes being used are orphaned now, and likely won't ever get updated again. Changing the WordPress source to use this method would abandon all those who don't update their themes, or whose themes aren't updated.
• It uses a GET variable, which generally makes the URL look ugly. I wouldn't say that's a majour problem though.
  • Sending the data as a POST would require the use of curl, a library that isn't switched on in PHP by default and so isn't suitable to use in WordPress
  • I tried holding this data in a session, but that didn't work for some reason...
• It echos, rather than returns. That makes it harder for theme developers to work with the data it returns.
• On the redirect back, all the comment fields are blank again. This could be hugely annoying if the user just spent an hour writing an awe inspiring comment, only to accidentally have left out their email address, and lose the comment. This is a problem mostly causes by me not knowing how to best transfer data from wp-comments-post.php back to the post.

PS. This is my first time submitting anything to an open source project, so this is more a learning experience for me rather than me aiming to add an awesome contribution. If I've done something wrong in the way of submitting this, or I've done bad open source coding conventions, email me please at (it may be a bit off topic in here): shamess at gmail dot com.

[Denis-de-Bernardy]

+1 to the idea in the patch, but the patch itself needs some work:

• add_query_arg() and wp_redirect() should be used
• a new hook should not be introduced, to ensure backward compat with themes that don't have it. maybe use the comment_form hook instead, with a very low (0) priority.
• one of the error messages is not localizable

[shamess]

Fixed according to Denis-de-Bernardy's notes. I had no idea those two functions existed.

I added the hook to comment_form, but the change might be a little surprising to users, which is why I didn't implement it on the first patch I gave. I gave it a lower priority (which is a higher is lower...) so hopefully it won't break other things.

Changed the text of the error message that was mentioned and made it localisable.

[shamess]

Updated version of my older patch (old one kept for comparison)

[Denis-de-Bernardy]

function and variable names might also need to be made consistent with the rest of WP, but else works.

[Denis-de-Bernardy]

err... actually not, there are die calls missing after wp_redirect().

[Denis-de-Bernardy]

nevermind, I'm blind. :D

[ryan]

The redirect needs to be aware of comment paging. It should also use the reply anchor. Although in the case of inline replies, we won't be able to send the user back exactly to where there were. Showing an error page with a button that does history.back would be far less annoying because it would take me back to where I was.

[Denis-de-Bernardy]

Related: #4332, #9203

[Denis-de-Bernardy]

see #9818

[SergeyBiryukov]

Related: #14984

[jane]

This is basically just begging for a javascript notice of required fields. Going to a separate page for an error message is so 5 years ago. Oh, wait. :)

[westonruter]

Add HTML5 required attributes on comment form inputs and remove formnovalidate.

[westonruter]

Screenshot of submitting comment form with blank message, in Chrome

[westonruter]

I know there has been previous discussion about the use of HTML5 form validation attributes (#22183, #15080), and in r23689 the formnovalidate attribute was added to explicitly disable client-side browser validation due to poor/incomplete client-side validation rules in their implementations, but #22183 notes that the offending browsers are Chrome 17 and Firefox 10, which is a century ago in Internet years, as we're now at Chrome 28 and Firefox 23. What specifically were the problems with the browsers' client-side email validation? Are they still valid?

All of this to say, we can quickly avoid the problem of no error page redirect and also improve the user experience by relying on client-side HTML5 form validation, and adding required attributes alongside the existing aria-required='true' attributes. (I don't believe required attribute need be conditioned on current_theme_supports( 'html5', 'comment-form' ) since the aria-required attribute is unconditional.) The required attribute can be unconditionally present on the comment textarea but conditionally on the name and email fields based on the require_name_email option, just like the aria-required attribute.

Patch attached, and branch also pushed to GitHub fork: ​https://github.com/x-team/WordPress/compare/4332-client-side-comment-form-validation

[rachelbaker]

I would like to see what we can do here for 4.4

[wonderboymusic]

4332.diff​ adds Back links on wp-comments-post.php - this needs work, just getting the fire started

[SergeyBiryukov]

Let's try to get both comment-template.php.diff​ and 4332.diff​ in (the latter needs i18n).

[helen]

I think it's going to be enough work to keep tabs on and communicate about the comment form field order changes this release, and there's no real momentum here right now, so punting.

[rachelbaker]

Refresh of wonderboymusic's patch after #10377

[rachelbaker]

@SergeyBiryukov 4332.2.diff​ needs i18n feedback, if you can.
In #24732 the html required attribute was added. Is there anything from comment-template.php.diff​ that is still missing? Or did you have a better approach?

[rachelbaker]

Added double left angle quote HTML entity to Back link

[rachelbaker]

After 4332.3.diff, which adds the « HTML entity to the back link text the result looks like this:

[ocean90]

Replying to rachelbaker:
You can pass array( 'back_link' => true ) to wp_die()to get a back link.

[rachelbaker]

Replying to ocean90:

Replying to rachelbaker:
You can pass array( 'back_link' => true ) to wp_die()to get a back link.

[rachelbaker]

Using the backlink arg from wp_die

[rachelbaker]

In 4332.4.diff, I replaced the manual "Back" link and used the back_link arg in wp_die() to generate the same output. Also set a title for wp-comments-post.php when there is an error to Comment Submission Failure (open to better suggestions here as well).

[rachelbaker]

In 36424:

Comments: Add a back link to wp_die() comment form submission error display.

Fixes #4332.

Props wonderboymusic, westonruter, shamess, rachelbaker.