Validation in Blazor In-place Editor component

03 Aug 2021 / 1 minute to read

Now, validation can be done by using the EditForm validation on the server-side. We need to handle the validation from the application level and the custom validation can also be achieved by using this.

Please refer to the following link for more details,EditForm Validation.

Validation for the TextBox is achieved in the following sample using the EditForm validation with a custom error message and validation rules.

@using Syncfusion.Blazor.InPlaceEditor
@using Syncfusion.Blazor.Calendars
@using System.ComponentModel.DataAnnotations;

<table class="table-section">
    <tr>
        <td class="sample-td"> Enter your name: </td>
        <td class="sample-td">
            <SfInPlaceEditor @bind-Value="exampleModel.Name" Type="Syncfusion.Blazor.InPlaceEditor.InputType.Text"  TValue="string">
                    <EditorComponent>
                            <EditForm Model="@exampleModel">
                                <DataAnnotationsValidator />
                                <SfTextBox @bind-Value="exampleModel.Name"></SfTextBox>
                                <ValidationMessage For=@(() => exampleModel.Name) />
                            </EditForm>
                    </EditorComponent>
                </SfInPlaceEditor>
        </td>
    </tr>
</table>

<style>
    .table-section {
        margin: 0 auto;
    }

    tr td:first-child {
        text-align: right;
        padding-right: 20px;
    }

    .sample-td {
        padding-top: 10px;
        min-width: 230px;
        height: 100px;
    }
</style>


@code {
    private string primaryKey { get; set; } = "editor1";
    private ExampleModel exampleModel = new ExampleModel();

    public class ExampleModel
    {
        [Required]
        [StringLength(10, ErrorMessage = "Name is too long.")]
        public string Name { get; set; } = "sync";
    }
}

The output will be as follows.

validation

Please provide additional information

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