Blazor
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Validation in Blazor In-place Editor component

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

Previous
Next