Edit-Form Validation

8 Jun 20225 minutes to read

The Rich Text Editor support validation using the EditForm. The user type text content inside the editor is validated with data annotations attributes. In the following example, the FormModel class has the Description property marked required with the RequiredAttribute and MinLengthAttribute minimum string length validation and error message. The Description property binding to editor @bind-Value property and validation work based on user input.

The runnable Blazor Server app demo is available in this Github repository.

@using Syncfusion.Blazor.RichTextEditor
@using System.ComponentModel.DataAnnotations;

<div class="control-section">
    <div class="content-container">
        <div id="content" class="box-form" style="margin: 0 auto; max-width:750px; padding:25px">
            <EditForm Model="@Model">
                <DataAnnotationsValidator />
                <SfRichTextEditor ShowCharCount="true" MaxLength="100" Placeholder="Type something..." @bind-Value="@Model.Description" />
                <ValidationMessage For="@(() => Model.Description)" />
                <div class="btn-grp">
                    <button class="samplebtn e-control e-btn" type="reset" data-ripple="true">Reset</button>
                    <button class="samplebtn e-control e-btn" type="submit" data-ripple="true">Submit</button>
                </div>
            </EditForm>
        </div>
    </div>
</div>

@code{
    private class FormModel
    {
        [Required]
        [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")]
        public string Description { get; set; }
    }

    private FormModel Model = new FormModel();
}

Form Validation in Blazor RichTextEditor

Validation attributes

The Rich Text Editor provides the functionality of character count and its validation. So, you can validate the editor’s value on form submission by applying validation attributes and validation messages to the 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 demonstrated form validation using the DataAnnotationsValidator.

@using Syncfusion.Blazor.RichTextEditor
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@MyForm">
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <SfRichTextEditor ShowCharCount="true" MaxLength="200" Placeholder="RTE Forms" @bind-Value="@MyForm.Description">
        </SfRichTextEditor>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>

@code{
    public class Form
    {
        [Required]
        [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")]
        public string Description { get; set; } = "<div>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>";
    }

    private Form MyForm = new Form();
}

Char Count Validation in Blazor RichTextEditor

Custom placement of validation message

The Form Validation error message can be placed from default position to desired custom location.

@using Syncfusion.Blazor.RichTextEditor
@using System.ComponentModel.DataAnnotations;

<EditForm Model="@MyForm">
    <p>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <SfRichTextEditor ShowCharCount="true" MaxLength="200" Placeholder="Type something" @bind-Value="@MyForm.Description">
        </SfRichTextEditor>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>

@code{
    public class Form
    {
        [Required(ErrorMessage = "RTE: value is required")]
        [MinLength(15, ErrorMessage = "RTE: Need atleast 15 character length")]
        [MaxLength(100, ErrorMessage = "RTE: Maximum 200 characters only")]
        public string Description { get; set; } = "<div>Rich Text Editor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>";
    }

    private Form MyForm = new Form();
}

Blazor RichTextEditor Validation in Custom placement

You can refer to our Blazor Rich Text Editor feature tour page for its groundbreaking feature representations. You can also explore our Blazor Rich Text Editor example to know how to render and configure the rich text editor tools.