Validation

17 Feb 202212 minutes to read

Validate the Rich Text Editor’s value on form submission by applying Validation Rules and Validation Message to the Rich Text Editor.

Validation Rules

The Rich Text Editor is a textarea control. The Rich Text Editor also provides the functionality of character count and its validation. So, you can validate the Rich Text Editor’s value on form submission by applying Validation Rules and Validation Message 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.

CSHTML

<div class="control-section">
    <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">
                @Html.EJS().RichTextEditor("defaultRTE").ShowCharCount(true).MaxLength(100).Placeholder("Type something").Created("created").Change("onChange").Render()
                <div id="dateError" style="padding-top: 10px"></div>
            </div>
            <div style="text-align: center">
                @Html.EJS().Button("validateSubmit").Disabled("true").Render()
                <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
            </div>
        </form>
    </div>
</div>

<script>
    var defaultRTE, formObject, options;
    function created() {
        options = {
            rules: {
                'rteForm': {
                    required: true
                }
            }
        };
        formObject = new ej.inputs.FormValidator('#form-element', options);
        defaultRTE = this;
        this.element.firstChild.setAttribute("required", "");
        this.element.firstChild.setAttribute('data-msg-containerid', 'dateError');
        this.element.firstChild.setAttribute('name', 'rteForm');
    };
    window.onload = function () {
        document.getElementById('validateSubmit').onclick = function () {
            getValue();
        };
    }
    function getValue() {
        formObject.validate();
    }
     function onChange() {
       var submitButton = document.getElementById("validateSubmit").ej2_instances[0];
     submitButton.disabled = false;
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}

Validation Message

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

CSHTML

<div class="control-section">
    <div id="content" style="margin: 0 auto; width:750px; padding:25px">
        <form id="form-element" class="form-vertical">
            <div class="form-group">
                @Html.EJS().RichTextEditor("form-support").ShowCharCount(true).MaxLength(100).Placeholder("Type something").Created("created").Change("onChange").Render()
                <div id="dateError" style="padding-top: 10px"></div>
            </div>
            <div style="text-align: center">
                @Html.EJS().Button("validateSubmit").Disabled("true").Render()
                <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
            </div>
        </form>
    </div>
</div>

<script>
    var defaultRTE, formObject, options;
    function created() {
        options = {
            rules: {
                'rteForm': {
                    required: true,
                    minLength: [20, 'Need atleast 20 character length'],
                    maxLength: [100, 'Maximum 100 character only']
                }
            }
        };
        formObject = new ej.inputs.FormValidator('#form-element', options);
        this.element.firstChild.setAttribute("required", "");
        this.element.firstChild.setAttribute('data-required-message', '* This field is required');
        this.element.firstChild.setAttribute('data-msg-containerid', 'dateError');
        this.element.firstChild.setAttribute('name', 'rteForm');
    };
    document.getElementById('validateSubmit').onclick = function () {
        getValue();
    }
    function getValue() {
        formObject.validate();
    }
    function onChange() {
       var submitButton = document.getElementById("validateSubmit").ej2_instances[0];
     submitButton.disabled = false;
    }
</script>

Controller.cs

public class HomeController : Controller
{

    public ActionResult Index()
    {
        return View();
    }
}

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.

CSHTML

<div class="control-section">
    <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">
                @Html.EJS().RichTextEditor("defaultRTE").ShowCharCount(true).MaxLength(100).Placeholder("Type something").Created("created").Change("onChange").Render()
                <div id="dateError" style="padding-top: 10px"></div>
            </div>
            <div style="text-align: center">
                @Html.EJS().Button("validateSubmit").Disabled("true").Render()
                <button id="resetbtn" class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
            </div>
        </form>
    </div>
</div>
<script>
    var defaultRTE, formObject, options;
    function created() {
        options = {
            rules: {
                'rteForm': {
                    required: true,
                    minLength: [6, 'Need atleast 6 character length'],
                    maxLength: [100, 'Maximum 100 character only']
                }
            },
            customPlacement: function (inputElement, error) {
                document.getElementById('dateError').appendChild(error);
            }
        };
        formObject = new ej.inputs.FormValidator('#form-element', options);
        defaultRTE = this;
        this.element.firstChild.setAttribute("required", "");
        this.element.firstChild.setAttribute('data-required-message', '* This field is required');
        this.element.firstChild.setAttribute('data-msg-containerid', 'dateError');
        this.element.firstChild.setAttribute('name', 'rteForm');
    }

    window.onload = function () {
        document.getElementById('validateSubmit').onclick = function () {
            getValue();
        };
    }
    function getValue() {
        formObject.validate();
    }
     function onChange() {
        var submitButton = document.getElementById("validateSubmit").ej2_instances[0];
     submitButton.disabled = false;
</script>

Controller.cs

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}