Search results

Form validation

This following sample demonstrate how to get the RichTextEditor validation error message in button click.

Render the editor in a form

Render the RichTextEditor in form as below.

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

<EditForm Model="@MyForm">
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <EjsRichTextEditor @bind-Value="@MyForm.Description" ShowCharCount="true" MaxLength="100">
            <div>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>
        </EjsRichTextEditor>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>


@code {
    private Form MyForm = new Form();
    public class Form
    {
        [Required]
        public string Description { get; set; }
    }
}

The output will be as follows.

Form

Validation Rules

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

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

<EditForm Model="@MyForm">
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <EjsRichTextEditor @bind-Value="@MyForm.Description" ShowCharCount="true" MaxLength="100" Placeholder="Type something">
            <RichTextEditorToolbarSettings items="@Tools"></RichTextEditorToolbarSettings>
            <div>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>
        </EjsRichTextEditor>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    private Form MyForm = new Form();
    public class Form
    {
        [Required]
        [MinLength(20, ErrorMessage = "Please enter at least 20 characters.")]
        public string Description { get; set; }
    }
}

The output will be as follows.

Form validation

Validation Message

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

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

<EditForm Model="@MyForm">
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <EjsRichTextEditor @bind-Value="@MyForm.Description" ShowCharCount="true" MaxLength="100" Placeholder="Type something">
            <RichTextEditorToolbarSettings items="@Tools"></RichTextEditorToolbarSettings>
            <div>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>
        </EjsRichTextEditor>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    private Form MyForm = new Form();
    public class Form
    {
        [Required]
        [MinLength(10, ErrorMessage = "Please enter at least 10 characters.")]
        [MaxLength(100, ErrorMessage = "Maximum 100 characters only")]
        public string Description { get; set; }
    }
}

Custom Placement of Validation Message

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

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

<EditForm Model="@MyForm">
    <p>
        <ValidationMessage For="@(() => MyForm.Description)"></ValidationMessage>
    </p>
    <DataAnnotationsValidator />
    <p>
        <label for="description">Enter Text</label>
        <EjsRichTextEditor @bind-Value="@MyForm.Description" ShowCharCount="true" MaxLength="100" Placeholder="Type something">
            <RichTextEditorToolbarSettings items="@Tools"></RichTextEditorToolbarSettings>
            <div>RichTextEditor allows to insert images from online source as well as local computer where you want to insert the image in your content.</div>
        </EjsRichTextEditor>
    </p>
    <button class="e-btn" type="submit">Submit</button>
</EditForm>

@code {
    public object[] Tools = new object[] {
        "Bold", "Italic", "Underline", "|",
        "Formats", "Alignments", "|", "CreateLink", "Image", "|","SourceCode", "|", "Undo", "Redo"
    };
    private Form MyForm = new Form();
    public class Form
    {
        [Required(ErrorMessage ="RTE: value is required")]
        [MinLength(15, ErrorMessage = "RTE: Need atleast 15 character length")]
        [MaxLength(100, ErrorMessage = "RTE: Maximum 100 characters only")]
        public string Description { get; set; }
    }
}

The output will be as follows.

Custom placement