Enabling required attribute validation only after a field clicked

Question

If I have the following viemodel properties:

public class ExampleViewModel
{
    [Required(ErrorMessage = "The email field is required.")]
    [EmailAddress(ErrorMessage ="Please enter a valid email address")]
    public string Email { get; set; }
    [Required(ErrorMessage = "The first name field is required.")]
    [RegularExpression("^[a-zA-Z\\-]+$", ErrorMessage="Please enter a valid name")]
    public string Forename { get; set; }
    [Required(ErrorMessage = "The last name field is required.")]
    [RegularExpression("^[a-zA-Z\\-]+$", ErrorMessage = "Please enter a valid name")]
    public string Surname { get; set; }
}

Then how do I only enable required fields on front-end ONLY after the fields are clicked on and clicked away from?

Currently the error messages are presented to the viewer straight away:

Example:

The front-end razor page is using blazorise validation, which only validates if all fields have been filled:

<Form method="post">
<Validations Mode="ValidationMode.Auto" Model="@ExampleViewModel" ValidatedAll="IsInvalid">
<Validation>
    <Blazorise.Field>
        <Blazorise.FieldLabel Class="is-bold">Email address</Blazorise.FieldLabel>
        <Blazorise.TextEdit Placeholder="Enter email" @bind-Text="@ContactDetails.Email" MaxLength=40>
            <Feedback>
                <ValidationError />
            </Feedback>
        </Blazorise.TextEdit>
    </Blazorise.Field>
</Validation>
<Row>
    <Blazorise.Title Size="10">Your Details</Blazorise.Title>
</Row>
<Validation>
    <Blazorise.Field>
        <Blazorise.FieldLabel Class="is-bold">First name</Blazorise.FieldLabel>
        <Blazorise.TextEdit Placeholder="John" @bind-Text="@ContactDetails.Forename" MaxLength=40>
            <Feedback>
                <ValidationError/>
            </Feedback>
        </Blazorise.TextEdit>
    </Blazorise.Field>
</Validation>
<Validation>
    <Blazorise.Field>
        <Blazorise.FieldLabel Class="is-bold">Last name</Blazorise.FieldLabel>
        <Blazorise.TextEdit Placeholder="Doe" @bind-Text="@ContactDetails.Surname" MaxLength=40>
            <Feedback>
                <ValidationError />
            </Feedback>
        </Blazorise.TextEdit>
    </Blazorise.Field>
</Validation>

you can remove the attribute from class and do validation in the click event — Vivek Nuna, Jun 20 '20 at 12:52

score 1 · Accepted Answer · answered Jun 22 '20 at 15:46

1

This feature is going to be available in the next version, v0.9.1.

answered Jun 22 '20 at 15:46

Mladen Macanović

1,099
7
17

The next version of what exactly? – Zee256 Jun 22 '20 at 15:50
The next version of Blazorise. – Mladen Macanović Jun 23 '20 at 19:30

score 0 · Answer 2 · answered Jun 20 '20 at 13:35

Maybe this can help : RequiredIf Conditional Validation Attribute

If you want to work with data annotation you can create a property boolean in your view model that indicates if you should check the required or not.

public bool HasUserClicked { get; set; }

[RequiredIf(nameof("HasUserClicked",true)
public string MyProperty{ get; set; }

When the user click you switch that boolean.

Edit Not sure it will work with Blazor by the way... And if you want to have more conditional validation you should maybe consider FluentValidation.

`RequiredIf` is not available in .net core 3.1, I have tried extending `RequiredAttribute` class as per this [answer](https://stackoverflow.com/questions/52321148/conditional-validation-in-mvc-net-core-requiredif/59175740#59175740) but it didn't work. — Zee256, Jun 22 '20 at 15:52

score 0 · Answer 3 · answered Jun 20 '22 at 21:02

I had a similar problem, but exactly the opposite, and it turns out that, you can toggle immediate validation off by excluding <DataAnnotationsVAlidator/> from your EditForm

For example say I had a class like this:

public class Apple {
  [Required]
  public string Color { get; set; }
}

This would cause the form to be validated, even if the user didn't type anything into Color.

 <EditForm OnValidSubmit="OnValidDevSubmit" EditContext="EditContext">
   <DataAnnotationsValidator/>
   <MudTextField T="string" Label="Color" Required="true" @bind-Value="apple.Color"/>
   <MudButton ButtonType="ButtonType.Submit">Submit</MudButton>
</EditForm>

On the otherhand, this would cause the form to be validated only if the user had clicked on Color and then clicked away.

 <EditForm OnValidSubmit="OnValidDevSubmit" EditContext="EditContext">
   <MudTextField T="string" Label="Color" Required="true" @bind-Value="apple.Color"/>
   <MudButton ButtonType="ButtonType.Submit">Submit</MudButton>
</EditForm>

Enabling required attribute validation only after a field clicked

3 Answers3