How to properly trigger model validation from a pop-up modal in ASP.NET CORE

Question

How can I fix validation not working properly in modal pop-up?

Here is my code to call modal:

<div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
                                <div class="modal-dialog" role="document">
                                    <div class="modal-content">

                                        @Html.Partial("CreateUnit")

                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->
                            <button id='open' data-toggle="modal" data-target="#showmodal">open modal</button>

Here is my code in controller:

public IActionResult CreateUnit()
    {
        return PartialView();
    }

    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> CreateUnit(UnitViewModel unit)
    {
        if (ModelState.IsValid)
        {
            var model = _mapper.Map<Unit>(unit);
            _context.Add(model);

            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return PartialView("CreateUnit", unit);
    }

And here is my code in partial view:

@model intPOS.Models.Master.ViewModel.UnitViewModel

<div class="modal-body">
    <div class="row">
        <div class="col-md-4">
            <form asp-action="CreateUnit">
                /*input model here*/
            </form>
        </div>
    </div>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

Here is the sample output:

Pop-up Sample

Output after I intentionally trigger the validation:

After validation

Answer 1

Here is a demo: UnitViewModel:

 public class UnitViewModel 
    {
        [Required]
        public string UnitCode { get; set; }
        [Required]
        public string UnitName { get; set; }

        public string UnitDescription { get; set; }
        public bool Status { get; set; }
    }

Controller:

 public IActionResult Index1() 
        {
            return View();
        }

        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Index1(UnitViewModel unit)
        {
            
            return View();
        }

Index1.cshtml(add the js,and when click Create button,if valid,it will post form,if not valid,it will show error message):

<div id="showmodal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">

            @Html.Partial("CreateUnit")

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<button id='open' data-toggle="modal" data-target="#showmodal">open modal</button>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>

CreateUnit.cshtml:

<div class="modal-body">
    <div class="row">
        <div class="col-md-4">
            <form method="post">
                <div class="form-group">
                    <label asp-for="UnitCode" class="control-label"></label>
                    <input asp-for="UnitCode" class="form-control" name="UnitCode" />
                    <span asp-validation-for="UnitCode" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="UnitName" class="control-label"></label>
                    <input asp-for="UnitName" class="form-control" name="UnitName" />
                    <span asp-validation-for="UnitName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="UnitDescription" class="control-label"></label>
                    <input asp-for="UnitDescription" class="form-control" name="UnitDescription" />
                    <span asp-validation-for="UnitDescription" class="text-danger"></span>
                </div>
                <div class="form-check form-check-inline">
                    <label class="form-check-label">
                        <input class="form-check-input" asp-for="Status" /> Status
                    </label>                 
                </div>

        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-info" />
        </div>
        </form>
    </div>
    </div>
</div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

result: