Razor pages jQuery function validation issue

Question

I have a form in Razor Pages .NET Core and inside this form I have a dropdown. This dropdown takes it's values (strings) from a jQuery function like this:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script>
        $(function () {
            $("#StartDate").on("change", function () {
                var time = $(this).val();
                $("#select").empty();
                $("#select").append("<option value=''>select </option>");
                $.getJSON(`?handler=Time&time=${time}`, (data) => {

                    $.each(data, function (i, item) {         
                        *$("#select").append("<option value='" + "'>" + item.hours + "</option>");*/
                        $("#select").append($("<option>").val(item.hours).text(item.hours));
                    });
                });
            });
        });
</script>


<form method="post" id="myForm">
    <div class="form-group">
         <h6><label class="col-form-label">Time</label></h6>
         <select id="select" asp-for="Time" class="form-control"></select>
         <span class="text-danger" asp-validation-for="Time"></span>
    </div>
</form>

Backend:

[Required(ErrorMessage = "Field cannot be empty!")]
[BindProperty]
public string Time { get;set; }


public IActionResult OnPost()
{
 if (!ModelState.IsValid)
 {
     return Page();
 }            
}

My issue is that after I submit my form, the ModelState.IsValid check always fails.

After some research, I found out that the reason is in my jQuery function because the added values are not validated.

I tried adding this line to my function, but it did not help:

 $.validator.unobtrusive.parse("#myForm");

Right now, what it happens is that if I select a value from the dropdown, the ModelState won't be valid and returns the page

Answer 1

In my code:

  <form method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="StartDate" class="control-label"></label>
            <input asp-for="StartDate" class="form-control" min="@DateTime.Now.ToString("yyyy-MM-ddThh:mm")" max="2050-06-01T00:00" />
            <span asp-validation-for="StartDate" class="text-danger"></span>
        </div>


        <select id="select" asp-for="Time" class="form-control"></select>
        <span class="text-danger" asp-validation-for="Time"></span>
        <div class="form-group">
            <input type="submit" value="Create" class="btn btn-primary" />
        </div>
    </form>

@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script>
    $(function () {
        $("#StartDate").on("change", function () {
            var time = $(this).val();
            $("#select").empty();
            $("#select").append("<option value=''>select </option>");
            $.getJSON(`?handler=Time&time=${time}`, (data) => {

                $.each(data, function (i, item) {         
                    *$("#select").append("<option value='" + "'>" + item.hours + "</option>");*/
                    $("#select").append($("<option>").val(item.hours).text(item.hours));
                });
            });
        });
    });

When I select a value from the dropdown,it will pass the validate,You can make an endpoint in your OnPost action.Below is my test,you can see which column failed the verification.