💡 Enable Client-side Comment Form Validation

[DangitRick]

Context

Many browsers supporting HTML5 are able to do client-side checks on form fields such as required, url, and email fields to ensure that the form content is filled out properly beforehand.

The ClassicPress comment form outputs valid HTML5 fields when themes declare support for HTML5; however, it also outputs a novalidate attribute into the form declaration. This prevents client-side validation, allowing incorrectly filled-out forms to be submitted. When this occurs, the user is greeted by a generic WordPress error and they must go back to the form, fix the problem, and resubmit.

Enabling client-side comment form validation has a few advantages:

• Users are immediately told whether a required field is still empty or whether a URL or email address is malformed
• On busier sites, client-side validation may help reduce the load on the server, which would otherwise have to process and warn the users about the form errors.
• The default error messages shown to users are ugly, may not match a site's aesthetic or branding, and may discourage users from taking the time go back and finish their comment.

Possible implemantion

Example of a default comment form error message, showing that a required field hasn't been filled out:

HTML5 validation on the same form, as seen in Safari 17:

An example of what an invalidly formatted email address would show:

Possible Solution

By replacing this:

			printf(
				'<form action="%s" method="post" id="%s" class="%s"%s>',
				esc_url( $args['action'] ),
				esc_attr( $args['id_form'] ),
				esc_attr( $args['class_form'] ),
				( $html5 ? ' novalidate' : '' )
			);

with this:

			printf(
				'<form action="%s" method="post" id="%s" class="%s">',
				esc_url( $args['action'] ),
				esc_attr( $args['id_form'] ),
				esc_attr( $args['class_form'] )
			);

in wp-includes/comment-template.php, HTML5 client-side validation will work as expected.

Will you be able to help with the implementation?

I have a pull request ready to go.

[xxsimoxx]

Closed by #194.