Search results

Validation in Vue RichTextEditor component

Validation rules

The RichTextEditor provides the functionality of character count and its validation. So, you can validate the RichTextEditor’s value on form submission by applying validationRules and validationMessage to the RichTextEditor.

Rules Description
required Requires value for the RichTextEditor control.
minlength Requires the value to be of given minimum characters count.
maxlength Requires the value to be of given maximum characters count.

This sample is used to validate form using the obtrusive Validation. Type the values in RichTextEditor and the form enables the validation with the formvalidator rules by clicking on the submit externally. All rules are validated by the formvalidator rules.

Source
Preview
app.vue
<template>
<div id="app">
    <div id='container'>
        <br>
        <form id="myForm" class="form-vertical">
        <div class="form-group">
          <ejs-richtexteditor id="defaultRTE"  name="defaultRTE" class="form-control" :placeholder="placeholder" :showCharCount="showCharCount" :created="forms" :maxLength="maxLength"></ejs-richtexteditor>
          <div class="error-element"></div>
        </div>
        <br/>
        <div class="form-btn-section">
          <button id="validateSubmit" class="sample-btn e-control e-btn" type="submit" data-ripple="true">Submit</button>
          <button id="reset-btn" class="sample-btn e-control e-btn" type="reset" data-ripple="true">Reset</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { RichTextEditorPlugin, Toolbar, Link, Count, Image, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
import { FormValidator } from '@syncfusion/ej2-inputs';

Vue.use(RichTextEditorPlugin);

export default {
   data: function() {
    return {
      value : null,
      showCharCount: true,
      maxLength: 100,
      placeholder: 'Type something'
        }
    },
methods: {
     forms() {
      var option = {
        rules: {
          defaultRTE: {
            required: true
          }
        },
        customPlacement: function(element, errorElement) {
          document.querySelector(".error-element").appendChild(errorElement);
        }
      }
      var formObject = new FormValidator('#myForm', option);
     }
   },
  provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, Count]
    }
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";

.error-element {
  margin-top: 5px;
}
</style>

Validation message

The default error message for a rule can be customizable by defining it along with the concern rule object as follows.

In the following sample, customize the error message along with the concern rule.

Source
Preview
app.vue
<template>
<div id="app">
    <div id='container'>
        <br>
        <form id="myForm" class="form-vertical">
        <div class="form-group">
          <ejs-richtexteditor id="defaultRTE"  name="defaultRTE" class="form-control" :placeholder="placeholder" :showCharCount="showCharCount" :created="forms" :maxLength="maxLength"></ejs-richtexteditor>
          <div class="error-element"></div>
        </div>
        <br/>
        <div class="form-btn-section">
          <button id="validateSubmit" class="sample-btn e-control e-btn" type="submit" data-ripple="true">Submit</button>
          <button id="reset-btn" class="sample-btn e-control e-btn" type="reset" data-ripple="true">Reset</button>
        </div>
      </form>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { RichTextEditorPlugin, Toolbar, Link, Image, Count, HtmlEditor } from "@syncfusion/ej2-vue-richtexteditor";
import { FormValidator } from '@syncfusion/ej2-inputs';

 Vue.use(RichTextEditorPlugin);

 export default {
   data: function() {
    return {
      value :null,
      showCharCount: true,
      maxLength: 100,
      placeholder: 'Type something'
        }
        },
methods: {
     forms() {
      var option = {
        rules: {
          defaultRTE: {
            required: true,
            minLength: [15, 'Need atleast 8 character length'],
            maxLength:[1208, 'Maximum 100 character only']
          }
        },
        customPlacement: function(element, errorElement) {
          document.querySelector(".error-element").appendChild(errorElement);
        }
      }
      var formObject = new FormValidator('#myForm', option);
     }
   },
  provide:{
        richtexteditor:[Toolbar, Link, Image, HtmlEditor, Count]
    }
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-richtexteditor/styles/material.css";

.error-element {
  margin-top: 5px;
}
</style>