How can I validate a Redactor rich text field in a front-end form using the VeeValidate Vue.js plugin? Scenario

I'm using the VeeValidate Vue.js plugin to validate a Craft front-end form that contains a Redactor rich text field. 

Problem

Validation of the rich text field fails because Redactor adds style="display: none;" to &lt;textarea&gt; elements.
Solution

Add the Redactor Sync callback function to the Vue.js instance to synchronize code/data between Redactor’s visual layer (UI) and the form’s &lt;textarea&gt; element.

As per the Redactor documentation:


  Visual layer contains multiple temporary tags that allow visual editing. Synchronization with textarea inserts clean code to the textarea, removing all temporary tags, styles and attributes. 


Solution source: Validate Redactor WYSIWYG Textarea Field #603

Vue.js/VeeValidate Component

// in your component.
export default {
    mounted() {
        var vm = this;
        $('#redactor').redactor({
            callbacks: {
                sync: function () {
                    vm.$validator.validate('fieldName',  this.code.get());
                }
            }   
        });
    }
}


Vue.js/VeeValidate CDN

&lt;script&gt;
    Vue.use(VeeValidate);

    new Vue({
        el: '#app',
        delimiters: ['${', '}'],

        mounted: function() {
            var vm = this;
            $('#redactor').redactor({
                callbacks: {
                    sync: function () {
                        vm.$validator.validate('fieldName',  this.code.get());
                    }
                }   
            });
        }
    });
&lt;/script&gt;