Validation in JavaScript RichTextEditor control

17 Mar 2023 / 3 minutes to read

Validation rules

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

Rules	Description
required	Requires value for the Rich Text Editor 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 Rich Text Editor 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

index.ts

index.html

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
/**
 * Rich Text Editor default sample
 */
import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
import { FormValidator } from '@syncfusion/ej2-inputs';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar);
import { Button } from '@syncfusion/ej2-buttons';

let button: Button;
let defaultRTE: RichTextEditor = new RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something',
change : function() {
  button.disabled = false;
}
});
defaultRTE.appendTo('#defaultRTE');
  let dialog: Dialog;
 button = new Button({
disabled :true
     });
button.appendTo('#validateSubmit');

new FormValidator('#form-element');

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
   <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="content" class="box-form" style="margin: 0 auto; width:750px; padding:25px">
            <form id="form-element" class="form-vertical">
                <div class="form-group">
                    <textarea id="defaultRTE" name="defaultRTE" required maxlength="100" minlength="20" data-msg-containerid="dateError">                    </textarea>
                    <div id="dateError" style="padding-top: 10px"></div>
                </div>
                <div style="text-align: center">
                    <button id="validateSubmit">Submit</button>
                    <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
                </div>
            </form>
        </div>
    </div>
</body>

</html>

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

index.ts

index.html

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar);
import { Button } from '@syncfusion/ej2-buttons';

let button: Button;
let defaultRTE: RichTextEditor = new RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something' ,
change : function() {
   button.disabled = false;
} });
defaultRTE.appendTo('#defaultRTE');

button = new Button({
disabled :true
     });
button.appendTo('#validateSubmit');

let option: FormValidatorModel = {
  rules: {
    // Initialize the CustomPlacement.
    defaultRTE: {
      required: true,
      minLength: [20, 'Need atleast 6 character length'],
      maxLength:[100, 'Maximum 100 character only']
    }
  },
  customPlacement: (inputElement: HTMLElement, dateError: HTMLElement)=>{
    document.getElementById('dateError').appendChild(dateError);
  }
};

let formObject: FormValidator = new FormValidator('#form-element', option);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="content" class="box-form" style="margin: 0 auto; width:750px; padding:25px">
           
            <form id="form-element" class="form-vertical">
                <div class="form-group">
                    <textarea id="defaultRTE" required name="defaultRTE" class="form-control"></textarea>
                    <div id="dateError" style="padding-top: 10px"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 control-label"></div>
                    <div class="col-sm-6">
                        <div id='error'></div>
                    </div>
                </div>
                <div style="text-align: center">
                    <button id="validateSubmit" class="samplebtn e-control e-btn">Submit</button>
                    <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
                </div>
            </form>
            
        </div>
    </div>
</body>

</html>

Custom placement of validation message

The FormValidator has an event customPlacement which can be used to place the error message from default position to desired custom location.

Source

Preview

index.ts

index.html

import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

import { RichTextEditor, Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar } from '@syncfusion/ej2-richtexteditor';
import { FormValidator, FormValidatorModel } from '@syncfusion/ej2-inputs';
RichTextEditor.Inject(Toolbar, Link, Image, HtmlEditor, Count, QuickToolbar);
import { Button } from '@syncfusion/ej2-buttons';

let button: Button;
let defaultRTE: RichTextEditor = new RichTextEditor({ showCharCount: true, maxLength: 100, placeholder: 'Type something' ,
change : function() {
    button.disabled = false;
} });
defaultRTE.appendTo('#defaultRTE');

button = new Button({
disabled :true
     });
button.appendTo('#validateSubmit');

let option: FormValidatorModel = {
  rules: {
  // Initialize the CustomPlacement.
  defaultRTE: { required:  [true, 'RTE: value is required'], minLength: [15, 'RTE: Need atleast 6 character length'], maxLength:[100, 'RTE: Maximum 100 character only']  }
  },
  customPlacement: (inputElement: HTMLElement, error: HTMLElement)=>{
    document.getElementById('error').appendChild(error);
  }
};
let formObject: FormValidator = new FormValidator('#form-element', option);

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Essential JS 2 Rich Text Editor</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-richtexteditor/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
     <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id="content" class="box-form" style="margin: 0 auto; width:750px; padding:25px">
           
            <form id="form-element" class="form-vertical">
                <div class="form-group">
                    <textarea id="defaultRTE" required name="defaultRTE" class="form-control"></textarea>
                    <div id="dateError" style="padding-top: 10px"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-3 control-label"></div>
                    <div class="col-sm-6">
                        <div id='error'></div>
                    </div>
                </div>
                <div style="text-align: center">
                    <button id="validateSubmit" class="samplebtn e-control e-btn">Submit</button>
                    <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
                </div>
            </form>
            
        </div>
    </div>
</body>

</html>

Contents

Validation rules
Validation message
Custom placement of validation message

Contents

Validation rules
Validation message
Custom placement of validation message

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!