web-dev-qa-db-fra.com

Pourquoi `add_theme_support ('html5', array ('comment-form'))` désactive-t-il la validation côté client?

Afin d'utiliser le balisage HTML5 pour les formulaires de commentaire, j'ajoute l'extrait de code suivant à functions.php:

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

Cependant, cela désactive la validation côté client lors de la soumission du formulaire et je suis redirigé vers une page d'erreur:

 Error page redirect 

Maintenant, si je supprime add_theme_support( 'html5', array( 'comment-form' ) ); et soumets le formulaire de commentaire, je reçois une validation côté client:

 Client side validation 

Quelqu'un peut-il expliquer pourquoi? Est-ce un bug? Ou comportement attendu?

J'utilise actuellement WordPress 4.7.

comment-formhtml5add-theme-support
4
kimbaudi

Non, ce n'est pas un bug. C’est ainsi que le noyau le gère. Si vous regardez dans /wp-includes/comment-template.php, vous remarquerez que la seule différence dans l'élément <form> est l'attribut novalidate ajouté, lorsque current_theme_supports( 'html5', 'comment-form' ) est vrai. Mais il y a d'autres éléments html dans la forme de commentaire, qui sont affectés par le choix du support du support html5 par le thème. Par exemple: champ de saisie pour email (type="email" - html5, type="text" - xhtml) et champ de saisie pour url (type="url" - html5, type="text" - xhtml).

Je ne recommanderais pas de supprimer le support de thème pour html5. WordPress, maintenant, construit nos documents avec <!DOCTYPE html>, ce qui signifie HTML5. Si nous supprimons le support, notre document ne sera pas validé comme XTML5 correct.

Alors, comment gérer cet attribut novalidate incriminé? Un simple script jQuery résoudra le problème.

Créez le fichier removenovalidate.js et mettez-y le code ci-dessous:

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

Enregistrez ce fichier dans le dossier de votre thème. Ajoutez le code ci-dessous au functions.php de votre thème:

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 );

Terminé. Votre formulaire de commentaires va valider maintenant.

3
Frank P. Walentynowicz

Vous pouvez supprimer l'attribut novalidate avec ce simple Javascript:

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

Pas besoin de jQuery.

Vous pouvez inclure le code suivant pour exécuter le script uniquement sur les publications:

footer.php

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