워드프레스 댓글에서 이름과 내용을 입력해야 제출 버튼 활성화되도록 하기

워드프레스 댓글 양식에서 이름 필드와 댓글 내용을 입력하지 않고 댓글 등록 버튼을 누르면 오류 페이지가 표시됩니다. 이름 필드와 댓글 내용을 작성하지 않으면 댓글 올리기 버튼이 눌러지지 않도록 하고 싶은 경우 아래의 방법을 사용할 수 있습니다.

워드프레스 댓글에서 이름과 댓글 내용을 입력해야 제출 버튼 활성화되도록 하기

이 블로그의 댓글 입력창에서는 이름과 댓글 내용을 모두 입력해야 댓글 등록 버튼이 활성화되도록 했습니다.

이름이나 댓글 내용 중 하나라도 입력하지 않으면 댓글 올리기 버튼이 비활성화되면서 댓글을 제출할 수 없게 됩니다.

GeneratePress 테마에서는 다음 코드로 댓글 작성자 이름과 댓글 내용을 모두 입력해야 댓글 등록 버튼을 활성화되도록 할 수 있습니다. 다른 워드프레스 테마에서는 테스트하지 않았지만 대부분 잘 작동할 것이라 생각됩니다.

CSS 코드:

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

상기 CSS 코드를 차일드 테마 내의 스타일시트 파일(style.css)이나 워드프레스 관리자 페이지 » 외모 » 사용자 정의하기 » 추가 CSS에 추가할 수 있습니다.

자바스크립트 코드:

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

상기 자바스크립트 코드를 "워드프레스에서 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 브레드크럼 추가하기
• 클라우드웨이즈로 서버 이전했습니다