1

I have a fairly simple edit form in a dialog box in Blazor server app. Added validation to it and it is working nicely.

I dislike fields jumping around when displaying validation messages (see below). Would like to have extra space below the fields when there is no message, and then replace that with the validation message if validation fails.

Seems like it should be simple. In my razor file just us an @if statement to display a row or a message depending on the fields validation status. But for the life of me I cannot find the property for each field. It must exist as I can get a message and I see the boxes in read?

Any suggestion on how to do this?

enter image description here

Razor file

<div class="form-group input-group">
     <span class="has-float-label">
         <SfTextBox id="Owner" @bind-Value="template.Owner" class="form-control" placeholder="Owner" />
         <label for="Owner">Owner</label>
         @if (template.Owner.ISVALID)
         {<span>&nbsp;</span>}
         else
         { <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>}
     </span>
</div>
Bryan Schmiedeler
  • 2,977
  • 6
  • 35
  • 74
  • "But for the life of me I cannot find the property for each field" what do you mean by this? – Mayur Ekbote Oct 25 '21 at 17:11
  • In my code I have a statement [ @if (template.Owner.ISVALID) ]. My model is template and one field is Owner. So the questions is how can I detect whether or not this field passed validation, so I can construct an if then else statement around the state of validation, i.e. if the field is valid just show space, if not valid, then show the validation method. There may be a better way to do what I want, which is to not have the fields move up or down, regardless of the validity status. Does that make sense? – Bryan Schmiedeler Oct 25 '21 at 18:19
  • 1
    You probably want to write your own version of `ValidationMessage` or do a wrapper component that displays `ValidationMessage` or the as you do above, and uses the same detection method as `ValidationMessage`. Here's the source: https://github.com/dotnet/aspnetcore/blob/main/src/Components/Web/src/Forms/ValidationMessage.cs. If you want example ask. – MrC aka Shaun Curtis Oct 25 '21 at 20:09
  • If you could provide a link to an example, I would be very grateful. – Bryan Schmiedeler Oct 25 '21 at 20:14

1 Answers1

2

fields jumping around is called CLS

you could just wrap them in a div with min-height, for example:

<div style='min-height:5em'>
    <ValidationMessage For="@(() => template.Owner)"></ValidationMessage>
</div>
buga
  • 852
  • 9
  • 21