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

Last Updated:2023年12月27日| 15のコメント

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タグが入力された場合のエラーメッセージの表示

名前フィールドとコメントの内容を入力しないと登録ボタンが無効になり、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>

参照


15のコメント

コメント

  1. コメントにHTMLタグが入力された場合、エラーメッセージを表示するJavaScriptコードがWPCodeプラグインフッター領域に追加されると適用されます。

    応答
    • 正確な理由はわかりませんが、キャッシュプラグインと関連がないかと思われることもありますね。 Ad Inserterで機能しない場合は、WPCodeを使用してください。

      応答
  2. コメントで名前と内容を入力しなければ送信ボタンが有効になるように設定すると、あえて名前フィールドを必須にする必要はないでしょうか?

    応答
      • コメントに名前と内容を入力しなければ送信ボタンが有効になるコードがJavaScriptを除いてCSSコードだけ入れても動作しますね!ありがとうございます^^

      • はい、見てみると、私のブログでもコメント名を必須に設定するコードが削除されましたね。

  3. WordPressにログインしたときに送信ボタンが常に有効になっていたことで、ログアウトして再確認してみると無効になっていますね^^

    応答
  4. 下のCSSコードを抜くから適用されますね。

    /*コメント登録ボタンスタイルの変更*/

    input#submit.submit {
    background-color: #1e73be;
    パディング:7px 25px。
    border-radius:30px;
    フォント重量:太字;
    transition: background-color 0.3s ease;
    }

    input#submit.submit:hover {
    background-color: darkgray;
    }

    input#submit.submit:active {
    位置:相対;
    トップ:2px。
    }

    応答
      • ああ、私は確認を間違えました。上記のCSSコードを除いて何のCSSコードも入れないと、送信ボタンを無効にするCSSコードとJavaScriptコードを入れても送信ボタンは無効になりません!

      • この部分は、jsファイルの適用が間違っているか、キャッシュプラグインなどと競合して問題が発生する可能性があります。

  5. CSSコードとJavaScriptコードをWPCodeフッタに追加しましたが、送信ボタンは無効になりません。

    応答