Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2017-07-09T18:07:57.013Z
Answers.LastActivityDate: 2017-07-09T18:07:57.013Z
Answers.UserDisplayName: Andrea DeMers
Body: <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>
  
Tags: <redactor><javascript><validation><frontend-form>
Title: How can I validate a Redactor rich text field in a front-end form using the VeeValidate Vue.js plugin?
ThreadText: # 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 `<textarea>` 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](https://imperavi.com/redactor/docs/callbacks/sync/#callback-sync) 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](https://github.com/baianat/vee-validate/issues/603)
  
  ### Vue.js/VeeValidate Component
  
  ```js
  // 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
  
  ```js
  <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>
  
  ```
  
  
  ---
  
  