How do I get Parsley JS validation to work on Tiny MCE rich text area? Specifically, how do notifiy Parsley.js of changes to the Tiny MCE?

I'm using both TinyMCE (version 4.9.10) and Parsley JS (version 2.9.1) on a form and I'm trying to validate the TinyMCE fields before form submission. Since TinyMCE builds its instances based on HTML textarea fields and I add my Parsley attributes such as data-parsley-required to the textarea fields, it seems like Parsley JS cannot "see" updates that happen to TinyMCE after the page loads and TinyMCE has initialized.

I will also point out that I found this related Stackoverflow question / answer

Validating TinyMCE using Parsley

and noticed that the fiddle it links to does not work (any longer?) If you hit submit without completing any fields and then go back and complete the fields and submit, the error for the TinyMCE element does not get cleared.

I should also mention that this particular form has several instances of TinyMCE rich text elements on it. (Yes, they all have different ids and have their own specific TinyMCE initialization calls.) In the event that makes a difference.

Here is an abridged version of the code:

HTML

<form id="email_form" action="<portlet:actionURL/>" method="post" name="<portlet:namespace/>_itsformportlet" data-parsley-validate="">
<table class="vipTable table-responsive">
    <tr>
        <th class="strong">Email Body</th>
    </tr>
    <tr>
        <td>
            <p>Please upload the message that you would like to appear in the body of the email</p>
            <p>Include Message Text:</p>
            <textarea id="emailBody" name="emailBody" data-parsley-required data-parsley-maxlength="[300]" data-parsley-maxlength-message="Please enter 300 characters max."></textarea>
        </td>
     </tr>
</table>
<input type="submit" name="Submit" value="Submit">
</form>

JS

 // TinyMCE Start - emailBody
         tinymce.init({
                selector: '#emailBody',
                height: 250,
                menubar: false,
                elementpath: false,
                browser_spellcheck: true,
                plugins: [
                    'advlist autolink autosave code lists link charmap print preview',
                    'searchreplace visualblocks fullscreen',
                    'table paste textcolor wordcount'
                ],
                autosave_retention: "30m",
                autosave_ask_before_unload: false,
                autosave_interval: "15s",
                autosave_restore_when_empty: true,
                toolbar1: "restoredraft | undo redo | forecolor backcolor | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code",
                setup: function(editor) {
                    editor.on('init', function() {
                        //Do what you need to do once TinyMCE is initialized
                        if (sessionStorage['emailBodySave']) {
                           //console.log("tinyText session variable is: " + sessionStorage.getItem("tinyText"));
                           tinymce.get('emailBody').setContent(sessionStorage.getItem("emailBodySave"));
                        }

                    });

                }
            });

$("#email_form").parsley();

I have used $("#email_form").parsley().refresh() as well (after input is entered into the TinyMCE field) to no avail.

Any thoughts on possible fixes? Please let me know. Thank you.

I ran this question by my Team Lead who came up with this solution:

$("#email_form").parsley()
    .on('form:validate', function() {
        tinymce.triggerSave();
    });

It seems to solve my issue. Thanks Frank!

So to clarify, when Parsley validation runs on the form (when submit is clicked) we want to be sure that TinyMCE saves the values / text that has been placed into those TinyMCE fields. That in turn will clear the validation errors and allow the form to submit.

Supporting documentation: https://www.tiny.cloud/docs-4x/api/tinymce/root_tinymce/#triggersave