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 <textarea> elements.

up vote 2 down vote accepted

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

<script>
    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());
                    }
                }   
            });
        }
    });
</script>

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.