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