In my app I have a form for the user to provide their address. This is in the Address.razor that is a component in my UserProfile.razor page.

The model.cs for the address has:

   [Required]
   public string? City
   {
       get => _city;
       set => _city = value?.Trim();
   }

When the user uses auto-fill in Chrome, it fills all the fields. But it runs validation, I assume when the street address is filled (before the city) and it then displays the message:

The City field is required.

Even though the city field is filled in. Why is validation triggered when the street address is filled in and how do I either stop this or re-run validation?