Last active
February 17, 2022 07:21
-
-
Save ncarandini/b0839175ce8c40c2b38605bb62844cbc to your computer and use it in GitHub Desktop.
[Blazor] Using IValidatableObject for form validation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<EditForm Model="@Item" OnValidSubmit="@(e => OnSave.InvokeAsync(Item))"> | |
<DataAnnotationsValidator /> | |
<ValidationSummary /> | |
<div class="form-group"> | |
<label for="Title">Name:</label> | |
<InputText id="Title" @bind-Value="Item.name" class="form-control" /> | |
</div> | |
<div class="form-group"> | |
<label for="Description">Description:</label> | |
<InputText id="Description" @bind-Value="Item.Description" class="form-control" /> | |
</div> | |
<div class="form-group"> | |
<InputCheckbox id="UseAlphaCode" @bind-Value="Item.UseAlphaCode" /> | |
<label for="UseAlphaCode"> | |
Use Alpha code | |
</label> | |
</div> | |
<div class="form-group"> | |
<label for="AlphaCode">AlphaCode:</label> | |
<InputText id="AlphaCode" @bind-Value="Item.AlphaCode" class="form-control" /> | |
</div> | |
<div class="form-group"> | |
<label for="BetaCode">BetaCode:</label> | |
<InputText id="BetaCode" @bind-Value="Item.BetaCode" class="form-control" /> | |
</div> | |
<button type="submit" class="btn btn-primary">Save</button> | |
<button type="button" class="btn btn-warning" @onclick="OnCancel">Cancel</button> | |
</EditForm> | |
@code { | |
[Parameter] | |
public Item Item { get; set; } | |
[Parameter] | |
public EventCallback<Item> OnSave { get; set; } | |
[Parameter] | |
public EventCallback OnCancel { get; set; } | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
public class Item : IValidatableObject, ICompany, IAddress | |
{ | |
[Required(ErrorMessage = "Name is required")] | |
public string Name { get; set; } | |
[Required(ErrorMessage = "Description is required")] | |
public string Description { get; set; } | |
public bool UseAlphaCode {get; set; } | |
public string AlphaCode { get; set; } | |
public string BetaCode { get; set; } | |
[Range(0, 999.99)] | |
public decimal Price { get; set; } | |
public IEnumerable<ValidationResult> Validate(ValidationContext validationContext) | |
{ | |
if (UseAlphaCode) | |
{ | |
if (String.IsNullOrWhiteSpace(AlphaCode)) | |
{ | |
yield return new ValidationResult("AlphaCode is required", new[] { "AlphaCode" }); | |
} | |
} | |
else | |
{ | |
if (String.IsNullOrWhiteSpace(BetaCode)) | |
{ | |
yield return new ValidationResult("BetaCode is required", new[] { "BetaCode" }); | |
} | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
When using Blazor form validation with a model class that implement
IValidatableObject
, the overloaded Validate method is called only on form submit and only if no other validation decorated properties fails.As an example, suppose that I try to submit the form with
Name
,Description
andAlphaCode
empty, and withUseAlphaCode
equal to true. Then the validation summary will contain only errors forName
,Description
and not forAlphaCode
. Only after clearing theName
andDescription
errors then theAlphaCode
appairs.