WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Sign up to join this community
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:
Now, if I remove add_theme_support( 'html5', array( 'comment-form' ) ); and submit the comment form, I get client side validation:
Can anybody explain why this is? Is it a bug? Or expected behavior?
I am currently using WordPress 4.7.
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.
'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.
<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.
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:
<?php if( is_singular() ) : ?>
<script type="text/javascript">
var commentForm = document.getElementById('commentform');
commentForm.removeAttribute('novalidate');
</script>
<?php endif; ?>
functions.phpfor that theme shows it is also enabling html5 markup forcomment-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 outcomment-formfrom default theme'sfunctions.php, client-side validation works. I don't think its a bug with my current theme, but some other issue. I'm just commenting outcomment-formfor now so I get client validation. I just think its odd.