Vee-validate: Validate Redactor WYSIWYG Textarea Field

[ademers]

Versions:

• VueJs: 2.3.4
• Vee-Validate: 2.0.0-rc.6

Description:

Validation fails on <textarea> field with style="display: none;".

I'm using Redactor as a WYSIWYG editor. It adds style="display: none;" to <textarea> elements which I suspect is causing field validation to fail.

Is there a way to make VeeValidate validate this field?

Steps To Reproduce:

Install and configure Redactor WYSIWYG editor.

[logaretm]

I took a look at Redactor documentation about callbacks: https://imperavi.com/redactor/docs/callbacks/sync/

I think you can do this:

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

Which should run the validation when Redactor syncs the data between the UI and the textarea.

[ademers]

Many thanks for your quick and helpful reply!

I'm using the CDN at the moment and got it working as follows:

    <script>
        Vue.use(VeeValidate);

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

            mounted: function() {
                var vm = this;
                $('#redactor').redactor({
                    buttons: ['bold', 'italic', 'deleted', 'lists', 'link'],
                    minHeight: 300,
                    callbacks: {
                        sync: function () {
                            vm.$validator.validate('fieldName',  this.code.get());
                        }
                    }   
                });
            }
        });
    </script>

[logaretm]

Great, we can close this then 😄

[ademers]

Hi @logaretm,

Sorry to reopen this, but since I upgraded to Redactor 3, the following code (updated for Redactor 3) no longer works as expected.

<script>
    Vue.use(VeeValidate);

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

        mounted: function() {
            var vm = this;
            $R('#redactor', {
                buttons: ['bold', 'italic', 'deleted', 'lists', 'link',],
                minHeight: '300px',
                callbacks: {
                    syncing: function () {
                        vm.$validator.validate('fieldName', this.code.get());
                    }
                }
            });
        }
    });
</script>

I get this error in browser console: Uncaught TypeError: Cannot read property 'get' of undefined.

Many thanks for your help!

[logaretm]

Probably the API changed, please consult their new documentation as I'm not familiar with Redactor, they probably pass something into the events callbacks now.