WordPress.org

Make WordPress Core

Opened 12 years ago

Closed 4 years ago

#4332 closed enhancement (fixed)

Unusable comment error pages

Reported by: foolswisdom Owned by: SergeyBiryukov
Milestone: 4.5 Priority: normal
Severity: normal Version: 1.5
Component: Comments Keywords: make-flow has-patch dev-feedback
Focuses: template Cc:

Description (last modified by 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.

Attachments (8)

comment-validation.diff (4.5 KB) - added by shamess 10 years ago.
comment-validation2.diff (3.6 KB) - added by shamess 10 years ago.
Updated version of my older patch (old one kept for comparison)
comment-template.php.diff (3.8 KB) - added by westonruter 6 years ago.
Add HTML5 required attributes on comment form inputs and remove formnovalidate.
client-side-html5-form-required-invalidity-chrome.png (48.6 KB) - added by westonruter 6 years ago.
Screenshot of submitting comment form with blank message, in Chrome
4332.diff (2.0 KB) - added by wonderboymusic 4 years ago.
4332.2.diff (518 bytes) - added by rachelbaker 4 years ago.
Refresh of wonderboymusic's patch after #10377
4332.3.diff (526 bytes) - added by rachelbaker 4 years ago.
Added double left angle quote HTML entity to Back link
4332.4.diff (646 bytes) - added by rachelbaker 4 years ago.
Using the backlink arg from wp_die

Download all attachments as: .zip

Change History (49)

#1 @foolswisdom
12 years ago

  • Description modified (diff)

#2 @rob1n
12 years ago

  • Milestone changed from 2.4 to 2.3
  • Owner changed from anonymous to rob1n
  • Status changed from new to assigned
  • Version 2.3 deleted

#3 @rob1n
12 years ago

  • Status changed from assigned to new

#4 @markjaquith
12 years ago

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.

#5 @f00f
12 years ago

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

#6 @markjaquith
12 years ago

  • Milestone changed from 2.3 to 2.4 (next)
  • Owner changed from rob1n to markjaquith
  • Status changed from new to assigned

Seems like a good idea for 2.4

#7 @janbrasna
11 years ago

  • Cc janbrasna added
  • Keywords comment error page usability dev-feedback 2nd-opinion added
  • Milestone changed from 2.9 to 2.8
  • Priority changed from low to normal
  • Severity changed from minor to normal
  • Summary changed from No comment error page requires browser navigation to leave to Unusable comment error pages
  • Version set to 1.5

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.

#8 @scohoust
10 years ago

  • Cc wp@… added

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

#9 @shamess
10 years ago

  • Keywords has-patch added

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.

#10 @Denis-de-Bernardy
10 years ago

  • Keywords needs-patch added; comment error page usability dev-feedback 2nd-opinion has-patch removed

+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

#11 @shamess
10 years ago

  • Cc shamess added
  • Keywords has-patch needs-testing added; needs-patch removed

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
10 years ago

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

#12 @Denis-de-Bernardy
10 years ago

  • Keywords tested 2nd-opinion added; needs-testing removed

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

#13 @Denis-de-Bernardy
10 years ago

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

#14 @Denis-de-Bernardy
10 years ago

nevermind, I'm blind. :D

#15 @ryan
10 years ago

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.

#16 @Denis-de-Bernardy
10 years ago

  • Keywords needs-patch added; has-patch tested 2nd-opinion removed

#17 @ryan
10 years ago

  • Component changed from General to Comments

#18 @Denis-de-Bernardy
10 years ago

  • Milestone changed from 2.8 to Future Release

#21 @Denis-de-Bernardy
10 years ago

  • Type changed from defect (bug) to enhancement

#23 @jane
8 years ago

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
6 years ago

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

@westonruter
6 years ago

Screenshot of submitting comment form with blank message, in Chrome

#24 @westonruter
6 years ago

  • Cc weston@… added
  • Keywords has-patch added; needs-patch removed

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

#25 @rachelbaker
4 years ago

  • Owner changed from markjaquith to rachelbaker

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

This ticket was mentioned in Slack in #core by helen. View the logs.


4 years ago

#27 @ryan
4 years ago

  • Keywords make-flow added

@wonderboymusic
4 years ago

#28 @wonderboymusic
4 years ago

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

#29 @wonderboymusic
4 years ago

  • Milestone changed from Future Release to 4.4

This ticket was mentioned in Slack in #core by sergey. View the logs.


4 years ago

#31 @SergeyBiryukov
4 years ago

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

#32 @wonderboymusic
4 years ago

  • Owner changed from rachelbaker to SergeyBiryukov
  • Status changed from accepted to assigned

#33 @helen
4 years ago

  • Keywords needs-patch added; has-patch removed
  • Milestone changed from 4.4 to Future Release

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
4 years ago

Refresh of wonderboymusic's patch after #10377

#34 @rachelbaker
4 years ago

  • Focuses template added
  • Keywords has-patch added; needs-patch removed
  • Milestone changed from Future Release to 4.5

@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?

This ticket was mentioned in Slack in #core by rachelbaker. View the logs.


4 years ago

@rachelbaker
4 years ago

Added double left angle quote HTML entity to Back link

#36 follow-up: @rachelbaker
4 years ago

After 4332.3.diff, which adds the « HTML entity to the back link text the result looks like this:
https://cldup.com/j9qaO6Ko1u.png

#37 in reply to: ↑ 36 ; follow-up: @ocean90
4 years ago

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

#38 in reply to: ↑ 37 @rachelbaker
4 years ago

Replying to ocean90:
https://media.giphy.com/media/Es3FISPjOZzAA/giphy.gif

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

@rachelbaker
4 years ago

Using the backlink arg from wp_die

#39 @rachelbaker
4 years ago

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

#40 @rachelbaker
4 years ago

  • Keywords dev-feedback added

#41 @rachelbaker
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 36424:

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

Fixes #4332.

Props wonderboymusic, westonruter, shamess, rachelbaker.

Note: See TracTickets for help on using tickets.