HTML5 Forms Validation

INTRODUCTION

My research is based on following assumptions:

WordPress version supports HTML5

Go to any admin page and inspect the resulting document. It should start with:

<!DOCTYPE html>

Theme supports HTML5 for comments

To be sure, add this to theme's functions.php:

function check_html5_support_for_comments() { 
    if ( !current_theme_supports( 'html5', 'comment-form' ) ) 
        add_theme_support( 'html5', 'comment-form' ); } add_action( 'after_setup_theme', 'check_html5_support_for_comments', 10 );

ANALYSIS

Let's display and inspect any post with a comment form in it. The markup for the form and its related input elements are HTML5 compliant. Good!

Have a closer look at the form element. It has novalidate attribute added. This attribute controls who will perform form's validation. If present, then validation is done on server-side, otherwise, by the browser (client-side).

There are questions here, on StackExchange, how to remove novalidate attribute? See: How to Remove novalidate attribute from comment form and Why does add_theme_support( 'html5', array( 'comment-form' ) disable client side validation? (just to mention a few). Some answers suggest removing theme support, which is a bad choice, as it kills HTML5 compliance. It can be done by quite simple jQuery script (see my answer to the second question, mentioned above).

Why people ask these questions? One look at validation error messages, generated by WordPress, explains it. The message is ugly as sin, destroys good user experience, and it is not HTML5 compliant, either!

Initially, I could not understand the reason behind WordPress making this arbitrary choice for us, to add novalidate attribute. Now, I know. As ugly as it is, the message generated by WordPress, is translatable. It might not be immediately obvious to English speaker, with browser set for English, and browsing English language-based websites. For such a user, there is no problem.

I develop websites in several languages, and I use English as language of choice, in my browser. Mismatch of languages, between the website and the browser, makes me reluctant to choose client-side form validation.

CONCLUSION AND FINAL QUESTION

As hard as I tried, I cannot find a way to use client-side validation, by forcing browsers to fully respect website's language settings, and so far, I cannot find a reasonable alternative to server-side validation, which is both, translatable, and HTML5 compliant. If you know the solution, please share it with me and other developers. Thanks.

Frank P. Walentynowicz @ StackExchange - WordPress ( 2017-05-02 )