Highlight page validation errors in a modal in ASP.NET

See more:

ASP.NET

After learning that the asp-route tag is all that is needed to connect your asp form to the controller for the data to be processed, I learnt that in ASP each razor page has a Model which is like a code behind file that is needed for validation of the inputs on the form. My form is inside a modal and I have defined a set of rules for the input such as:
1. The name cannot be empty
The name cannot be less than three characters
For the rules above the model for the index page has the following code

[BindProperty]
[Required(ErrorMessage = "The name field is required")]
//the name field needs to be at least three characters long
[StringLength(3,ErrorMessage ="Please enter a valid name")]
public string Name
{
    get; set;
}

For the query input then have the following rules.
1. The query field cannot be empty
The query field needs to be at least 20 characters long
To make the above rules effective for the query input field I implemented the following code for the query input field

[BindProperty]
 //the query field cannot be empty
 [Required(ErrorMessage ="The query field cannot be empty")]
 //the query field needs to be at least 20 characters long
 [StringLength(20,ErrorMessage ="The query needs to be at least 20 characters long")]
 public string Query
 {
     get; set;
 }

What I have tried:

The two input fields have the right asp-validation-for tags and the markup looks like below.

<form method="post" asp-route="Form" id="form">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" name="Name" class="form-control" id="name">
    <span asp-validation-for="Name" class="text-danger"></span>
    </div>
 <div class="form-group">
  <label for="query">Query</label>
  <textarea class="form-control" name="Query" id="query" style="margin-top:10px"></textarea>
  <span asp-validation-for="Query" class="text-danger"></span>
   <input type="submit" class="btn btn-primary"/>
   </div>
</form>

and this is how I check the validation state in the Controller, think this s where should be returning a view with the errors displayed in the span elements but am not sure, will it reopen the modal and show the errors ?

[Route("api/controller",Name ="Form")]
  [ApiController]
  public class FormController : ControllerBase
  {
    //use this method to validate the input fields of the form
    public IActionResult OnPost()
      {
          if (!ModelState.IsValid) {
          return BadRequest(ModelState);
          }
          return Ok("All form fields were successfully validated");
      }
  }

The valid state detection works but shows them as raw text and also the length validation is not called as the empty string validation is done and the response text is shown in a separate page with the following contents

"type": "https://tools.ietf.org/html/rfc7231#section-6.5.1",
   "title": "One or more validation errors occurred.",
   "status": 400,
   "traceId": "00-8c33ebc73389a87a1d46f7fbfbc30571-47b939678a6ed018-00",
   "errors": {
       "Name": [
           "The Name field is required."
       ],
       "Query": [
           "The Query field is required."
       ]
   }

How do make these errors get displayed in the form which is inside a modal?