<h2>Solution</h2>

<p>Add the <a href="https://imperavi.com/redactor/docs/callbacks/sync/#callback-sync" rel="nofollow noreferrer">Redactor <code>Sync</code> callback function</a> to the Vue.js instance to synchronize code/data between Redactor’s visual layer (UI) and the form’s <code>&lt;textarea&gt;</code> element.</p>

<p>As per the Redactor documentation:</p>

<blockquote>
  <p>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. </p>
</blockquote>

<p>Solution source: <a href="https://github.com/baianat/vee-validate/issues/603" rel="nofollow noreferrer">Validate Redactor WYSIWYG Textarea Field #603</a></p>

<h3>Vue.js/VeeValidate Component</h3>

<pre class="lang-js prettyprint-override"><code>// in your component.
export default {
    mounted() {
        var vm = this;
        $('#redactor').redactor({
            callbacks: {
                sync: function () {
                    vm.$validator.validate('fieldName',  this.code.get());
                }
            }   
        });
    }
}
</code></pre>

<h3>Vue.js/VeeValidate CDN</h3>

<pre class="lang-js prettyprint-override"><code>&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;
</code></pre>

CC BY-SA 3.0
2017-07-09T18:07:57.013Z
2017-07-09T18:07:57.013Z
Andrea DeMers
<h2>Scenario</h2>

<p>I'm using the <a href="http://vee-validate.logaretm.com" rel="nofollow noreferrer">VeeValidate</a> <a href="https://vuejs.org" rel="nofollow noreferrer">Vue.js</a> plugin to validate a Craft front-end form that contains a <a href="https://imperavi.com/redactor/" rel="nofollow noreferrer">Redactor</a> rich text field. </p>

<h2>Problem</h2>

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

<redactor><javascript><validation><frontend-form>
How can I validate a Redactor rich text field in a front-end form using the VeeValidate Vue.js plugin?
# How can I validate a Redactor rich text field in a front-end form using the VeeValidate Vue.js plugin?

(Asked by: username_0 on 2017-07-09)

## Scenario

I'm using the [VeeValidate](http://vee-validate.logaretm.com) [Vue.js](https://vuejs.org) plugin to validate a Craft front-end form that contains a [Redactor](https://imperavi.com/redactor/) rich text field.

## Problem

Validation of the rich text field fails because Redactor adds `style="display: none;"` to  elements.

**Tags:** redactor, javascript, validation, frontend-form


---

## 1 answers

### Answer by username_0 on 2017-07-09. Score: 2 | Accepted answer

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


---

