Terence Eden’s Blog on Nostr: Improving the WordPress Comments Form with Client-Side Validation ...
Improving the WordPress Comments Form with Client-Side Validation
https://shkspr.mobi/blog/2023/10/improving-the-wordpress-comments-form/
If you use WordPress's HTML5 comments, there's an annoying little gotcha. There's a four year old bug which prevents client-side form validation.
HTML allows <input> elements to have a required attribute. In theory, that means the form shouldn't submit until the input is filled in. Sadly, WordPress uses novalidate on the form - as the name suggests it stops any validation.
But! WordPress is very hackable. Here's how to make a comment form which does client-side validation and as a bonus checks that the commentor's URl starts with http:// or https://
In your theme, there should be a file called comments.php - that's what we'll be editing.
We're looking for the part which generates the comments form. It will probably be comment_form( $comments_args ); or comment_form();
We're going to need to create a $comments_args array full of the options we want to set.
The most important is "format" => "xhtml" - that prevents the dreaded novalidate from appearing.if ( comments_open() || pings_open() ) : $comments_args = array( // Force client side validation "format" => "xhtml", "comment_field" => '<label for="comment">Comment:</label>'. '<textarea required id="comment" name="comment" cols="45" rows="8" maxlength="65525" placeholder="Write something interesting here…"></textarea>', 'fields' => array( 'author' => '<label for="author">Your Name (required):</label>'. '<input type="text" required id="author" name="author" value="" size="30" maxlength="245" autocomplete="name" placeholder="Dr. Winston O\'Boogie">', 'email' => '<label for="email">Your Email (required):</label>'. '<input type="email" required id="email" name="email" placeholder="me@example.com">', 'url' => '<label for="url">Your Website (optional):</label>'. '<input type="url" id="url" name="url" pattern="^https?:\/\/(.*)" placeholder="https://example.com">'; ) ); comment_form( $comments_args );
Save that and upload it to your theme and - hopefully - it will work. You can test it out by leaving me a comment below.
https://shkspr.mobi/blog/2023/10/improving-the-wordpress-comments-form/
#HowTo #HTML #php #wordpress
https://shkspr.mobi/blog/2023/10/improving-the-wordpress-comments-form/
If you use WordPress's HTML5 comments, there's an annoying little gotcha. There's a four year old bug which prevents client-side form validation.
HTML allows <input> elements to have a required attribute. In theory, that means the form shouldn't submit until the input is filled in. Sadly, WordPress uses novalidate on the form - as the name suggests it stops any validation.
But! WordPress is very hackable. Here's how to make a comment form which does client-side validation and as a bonus checks that the commentor's URl starts with http:// or https://
In your theme, there should be a file called comments.php - that's what we'll be editing.
We're looking for the part which generates the comments form. It will probably be comment_form( $comments_args ); or comment_form();
We're going to need to create a $comments_args array full of the options we want to set.
The most important is "format" => "xhtml" - that prevents the dreaded novalidate from appearing.if ( comments_open() || pings_open() ) : $comments_args = array( // Force client side validation "format" => "xhtml", "comment_field" => '<label for="comment">Comment:</label>'. '<textarea required id="comment" name="comment" cols="45" rows="8" maxlength="65525" placeholder="Write something interesting here…"></textarea>', 'fields' => array( 'author' => '<label for="author">Your Name (required):</label>'. '<input type="text" required id="author" name="author" value="" size="30" maxlength="245" autocomplete="name" placeholder="Dr. Winston O\'Boogie">', 'email' => '<label for="email">Your Email (required):</label>'. '<input type="email" required id="email" name="email" placeholder="me@example.com">', 'url' => '<label for="url">Your Website (optional):</label>'. '<input type="url" id="url" name="url" pattern="^https?:\/\/(.*)" placeholder="https://example.com">'; ) ); comment_form( $comments_args );
Save that and upload it to your theme and - hopefully - it will work. You can test it out by leaving me a comment below.
https://shkspr.mobi/blog/2023/10/improving-the-wordpress-comments-form/
#HowTo #HTML #php #wordpress