In order to use HTML5 markup for the comment forms, I add the following code snippet to functions.php:

add_theme_support( 'html5', array( 'comment-form' ) );

However, it disables client side validation on form submit and I get redirected to an error page:

Error page redirect

Now, if I remove add_theme_support( 'html5', array( 'comment-form' ) ); and submit the comment form, I get client side validation:

Client side validation

Can anybody explain why this is? Is it a bug? Or expected behavior?

I am currently using WordPress 4.7.

  • Could be a bug with your current theme/plugin? Do you get the same behavior for any of the default themes, e.g. TwentySixteen, that supports html5 comment-form? – birgire Dec 27 '16 at 18:17
  • The default theme for my WordPress is TwentySeventeen and looking at the functions.php for that theme shows it is also enabling html5 markup for comment-form. When I use that default theme, I don't get client-side validation and it just redirects to the error page. But when I comment out comment-form from default theme's functions.php, client-side validation works. I don't think its a bug with my current theme, but some other issue. I'm just commenting out comment-form for now so I get client validation. I just think its odd. – kimbaudi Dec 27 '16 at 18:29

No, it is not a bug. This is how core handles it. If you look into /wp-includes/comment-template.php, you'll notice, that the only difference in <form> element, is novalidate attribute added, when current_theme_supports( 'html5', 'comment-form' ) is true. But there are other html elements within comment form, which are affected by theme's choice of html5 support. For example: input field for email ( type="email" - html5, type="text" - xhtml ), and input field for url ( type="url" - html5, type="text" - xhtml ).

I would not recommend to remove theme support for html5. WordPress, now, builds our documents with <!DOCTYPE html>, which means, HTML5. If we do remove support, our document will not validate as correct XTML5.

So, how to deal with this offending novalidate attribute? Simple jQuery script will fix it.

Create file removenovalidate.js and put the code below in it:

jQuery( document ).ready(function($) {
    $('#commentform').removeAttr('novalidate');
});

Save this file to your theme's folder. Add the code below to your theme's functions.php:

function fpw_enqueue_scripts() {
    if ( is_single() ) { 
        wp_register_script( 'fpw_remove_novalidate', get_stylesheet_directory_uri() . '/removenovalidate.js', array( 'jquery' ), false, true );
        wp_enqueue_script( 'fpw_remove_novalidate' );
    }
}
add_action('wp_enqueue_scripts', 'fpw_enqueue_scripts', 10 );

All done. Your comments form will validate now.

  • I agree with you. Omitting 'comment-form' from theme support adds the problematic novalidate attribute to <form> as well as adding proper html5 input types for email and url (i.e., type="email" and type="url"). Otherwise, adding add_theme_support( 'html5', array( 'comment-form' ) ); removes the offending novalidate attribute, but also sets type=text for email and url inputs. You're solution of enabling theme support for 'comment-form' works, but you're using jQuery to manipulate the DOM and remove the novalidate attribute from the comment form. – kimbaudi Apr 30 '17 at 2:30
  • Basically, if you want client side validation for wp comment forms, the <form> element cannot have novalidate attribute. You have 2 choices. 1) Omit/comment-out comment-form from add-theme-support. This will work, but the downside is that email and url inputs will be type=text (which is xhtml instead of html5). 2) Add/enable comment-form from add-theme-support, but also use jQuery to remove novalidate attribute from comment form. This will also work, but the downside is that you have to additionally use javascript to manipulate the DOM. – kimbaudi Apr 30 '17 at 2:41
  • Check more in depth analysis of the problem here – Frank P. Walentynowicz Apr 30 '17 at 5:46

You can remove novalidate attribute with this simple Javascript:

<script type="text/javascript">
    var commentForm = document.getElementById('commentform'); 
    commentForm.removeAttribute('novalidate');
</script>

No jQuery needed.

You can include the following code to run script just on posts:

footer.php

<?php if( is_singular() ) : ?>
    <script type="text/javascript">
        var commentForm = document.getElementById('commentform');
        commentForm.removeAttribute('novalidate');
    </script>
<?php endif; ?>

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.