How to make WP Classic Editor required in jQuery

It looks like you’re trying to validate the content of a WordPress Classic Editor, ensuring it’s not empty, both in HTML and Visual modes. The issue arises with the Visual mode which is powered by TinyMCE. Unlike standard HTML form elements, TinyMCE’s content isn’t directly linked with its underlying textarea element in a way that the required attribute would work as expected.

To achieve validation for both modes, you should intercept the form submission process and manually check the content of the TinyMCE editor. Here’s an approach you can take:

Bind to the Form Submission Event: Attach an event handler to the form’s submission event.

Check Content for Both Modes: In the event handler, retrieve the content from the Classic Editor in both HTML and Visual modes. If the editor is in Visual mode, you’ll need to get the content from the TinyMCE instance.

Prevent Form Submission if Content is Empty: If the content is empty, prevent the form from being submitted and alert the user.

Here’s a jQuery script that demonstrates this approach:

jQuery(document).ready(function($) {
    // Assuming your form has an ID of 'post'
    $('#post').submit(function(e) {
        var content="";

        // Check if Classic Editor is in Visual mode
        if(tinymce.get('content') && !tinymce.get('content').hidden) {
            content = tinymce.get('content').getContent();
        } else {
            // Classic Editor in HTML mode
            content = $('#content').val();
        }

        // Check if content is empty
        if(content.trim() === '') {
            e.preventDefault(); // Prevent form submission
            alert('The content must not be empty.');
        }
    });
});

This script should work in both modes of the Classic Editor. It’s important to note that if your form has a different ID or if there are multiple forms, you might need to adjust the selector accordingly. Also, make sure that TinyMCE is loaded before this script runs, as it relies on the TinyMCE API to get the content in Visual mode.