WordPress コメントに名前と内容を入力する前に送信ボタンを有効にする

WordPress コメントフォームで、名前フィールドとコメントの内容を入力せずにコメント登録ボタンをクリックすると、エラーページが表示されます。 [名前]フィールドとコメントの内容を作成しない場合は、[コメントのアップロード]ボタンが押されないようにしたい場合は、次の方法を使用できます。

WordPress コメントに名前とコメントの内容を入力し、送信ボタンを有効にするには

このブログのコメント入力ウィンドウでは、名前とコメントの内容の両方を入力しなければコメント登録ボタンが有効になりました。

名前またはコメントの内容のいずれかを入力しないと、[コメントのアップロード]ボタンが無効になり、コメントを送信できなくなります。

GeneratePress テーマでは、次のコードでコメント作成者の名前とコメントの内容の両方を入力し、コメント登録ボタンを有効にすることができます。その他 WordPress テーマではテストしていませんが、ほとんどがうまくいくと思います。

CSSコード：

/* Style for disabled submit button */
#submit:disabled {
    background-color: gray;
    color: white;
    cursor: not-allowed;
}

上記のCSSコード チャイルドテーマ 内のスタイルシートファイル（style.css）または WordPress 管理者ページ » ルックス » カスタマイズ » 追加 CSSに追加することができます。

JavaScriptコード：

<script>
document.addEventListener('DOMContentLoaded', function () {
    const authorInput = document.getElementById('author');
    const commentInput = document.getElementById('comment');
    const submitButton = document.getElementById('submit');

    function updateButtonState() {
        if (authorInput.value.trim() !== '' && commentInput.value.trim() !== '') {
            submitButton.disabled = false;
        } else {
            submitButton.disabled = true;
        }
    }

    // Initial check
    updateButtonState();

    // Event listeners for input fields
    authorInput.addEventListener('input', updateButtonState);
    commentInput.addEventListener('input', updateButtonState);
});
</script>

上記のJavaScriptコードを「WordPressでjsスクリプトファイルとスタイルシートを正しくロードする方法「を参照してロードできます。

単にそれはお勧めできませんが、 WPCodeプラグインをインストールし、フッター領域に上記のコードを追加できます。

GeneratePress テーマを使用している場合は、Elementsでwp_footerフックを指定してフッタ領域にコードを追加できます。

コメントにHTMLタグが入力された場合のエラーメッセージの表示

このブログのコメントシステムでコメントを作成するときにHTMLタグを入力すると、警告が表示され、コメント送信ボタンが無効になります。

名前フィールドとコメントの内容を入力しないと登録ボタンが無効になり、HTMLタグがコメントの内容に含まれている場合は登録ボタンが無効になり、警告メッセージが表示されるようにしたい場合は次のJavaScriptコードを使用できます。 （※2023年12月27日更新：最初に提示されたコードがモバイルでは動作せず、モバイルで動作するように変更しました。）

<script>
window.addEventListener("DOMContentLoaded", function() { 
    // Find the textarea, author input, and submit button
    const textarea = document.querySelector('textarea[name="comment"][cols="45"][rows="8"]');
    const authorInput = document.getElementById('author');
    const submitButton = document.getElementById('submit');

    // Function to update the state of the submit button
    function updateSubmitButtonState() {
        const isAuthorNotEmpty = authorInput.value.trim() !== '';
        const isTextareaNotEmpty = textarea.value.trim() !== '';
        const hasHTMLTags = /<\/?[a-z][\s\S]*?>/i.test(textarea.value);

        submitButton.disabled = !(isAuthorNotEmpty && isTextareaNotEmpty) || hasHTMLTags;
    }

    if (textarea) {
        // Existing event listeners for the textarea
        textarea.addEventListener("input", handleTextareaInput);
        textarea.addEventListener("change", handleTextareaInput); // Added for mobile devices
    }

    if (authorInput) {
        // Event listener for author input field
        authorInput.addEventListener('input', updateSubmitButtonState);
        authorInput.addEventListener('change', updateSubmitButtonState); // Added for mobile devices
    }

    // Function to handle input and change events for textarea
    function handleTextareaInput() {
        const content = this.value;
        const hasHTMLTags = /<\/?[a-z][\s\S]*?>/i.test(content);
        let warning = document.getElementById("htmlTagWarning");

        if (hasHTMLTags) {
            if (!warning) {
                warning = document.createElement('span');
                warning.id = "htmlTagWarning";
                warning.className = "comments-warning";
                warning.innerHTML = 'Warning! HTML 태그 입력이 허용되지 않습니다. <a href="https://www.thewordcracker.com/lt-gt-converter/" target="_blank">여기</a>에서 부등호 기호를 변환하여 입력해주세요.';
                this.after(warning);
            }
        } else if (warning) {
            warning.remove();
        }

        updateSubmitButtonState();
    }

    // Initial check to update submit button state
    updateSubmitButtonState();
});
</script>

参照

• すべてのコメントをゴミ箱に移動する方法（スパムコメントに対処する）
• GeneratePress テーマ：Rank Math SEOブレッドクラムを追加する
• クラウドウェイズにサーバーを移行しました