web-dev-qa-db-ja.com

Add_theme_support（ 'html5'、array（ 'comment-form'））がクライアントサイドの検証を無効にするのはなぜですか？

コメントフォームにHTML5マークアップを使用するために、以下のコードスニペットをfunctions.phpに追加します。

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

ただし、フォーム送信時のクライアント側の検証は無効になり、エラーページにリダイレクトされます。

Error page redirect 

add_theme_support( 'html5', array( 'comment-form' ) );を削除してコメントフォームを送信すると、クライアント側で検証が行われます。

Client side validation 

誰がこれがなぜなのか説明できますか？それはバグですか？それとも予想される動作？

私は現在WordPress 4.7を使用しています。

comment-formhtml5add-theme-support
4
kimbaudi

いいえ、それはバグではありません。これが、coreによる処理方法です。 /wp-includes/comment-template.phpを見ると、current_theme_supports( 'html5', 'comment-form' )がtrueの場合、<form>要素の唯一の違いはnovalidate属性が追加されていることです。しかし、コメントフォーム内には他にもhtml要素があり、それらはテーマのhtml5サポートの選択に影響されます。例：emailの入力フィールド（type="email" - html5、type="text" - xhtml）、およびurlの入力フィールド（type="url" - html5、type="text" - xhtml）。

Html5のテーマサポートを削除することはお勧めできません。現在、WordPressは<!DOCTYPE html>、つまりHTML5を使用してドキュメントを作成しています。サポートを削除した場合、ドキュメントは正しいXTML5として検証されません。

それでは、この問題のあるnovalidate属性をどのように処理するのでしょうか。簡単なjQueryスクリプトで修正されます。

ファイルremovenovalidate.jsを作成し、その中に以下のコードを入れます。

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

このファイルをテーマのフォルダに保存してください。テーマの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 );

全部できた。あなたのコメントフォームは今検証するでしょう。

3
Frank P. Walentynowicz

この単純なJavascriptを使ってnovalidate属性を削除できます。

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

JQueryは必要ありません。

投稿に対してスクリプトを実行するために次のコードを含めることができます。

footer.php

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