Serialise HTML Form with time/text input type and validation of time fields

题意：将具有时间和文本输入类型的HTML表单序列化，并对时间字段进行验证

问题背景：

I am trying to create an HTML Form that will be used to send data to the backend in C#.

我正在尝试创建一个HTML表单，该表单将用于将数据发送到C#编写的后端。

Below is the Form which consists of 2 fields: FROMTIME and TOTIME.

下面是一个表单，包含两个字段：FROMTIME 和 TOTIME。

I need to make sure that the user inputs the values in the format of HH:MM but this is not feasible without validation.

我需要确保用户以HH:MM的格式输入值，但没有验证这是不可行的。

I have tried using input type="time" but this does not allow me to serialise the data and send that to the backend.

我尝试过使用input type="time"，但这不允许我序列化数据并将其发送到后端。

I am using $("#editForm").serialize or $("#editForm").serializeObject or $("#editForm").serializeArray but the data is empty because the serialisation does not include the Time data.

我正在使用$("#editForm").serialize()、$("#editForm").serializeObject()或$("#editForm").serializeArray()，但数据是空的，因为序列化不包括时间数据

Any ideas please?

Is there a way to force the user to input hour and minutes in the format of HH:MM?

有一种方法可以强制用户以HH:MM的格式输入小时和分钟吗？

<form id="editForm">
  <table>
    <tr>
      <th>From Time: </th>
      <td style="background-color:white;">       
        <input  type="text" id="FROMTIME"  placeholder="HH:MM" name="FROMTIME" value="@Model.FROMTIME" asp-for="FROMTIME" required form="editForm" />
      </td>
    </tr>
    <tr>
      <th>To Time: </th>
      <td style="background-color:white;">
        <input type="text" id="TOTIME"  placeholder="HH:MM" name="TOTIME" value="@Model.TOTIME" asp-for="TOTIME" required form="editForm" />
      </td>
    </tr>
  </table>
</form>

The Ajax call for the backend using serialisation for the data are the following lines of code. The printout at the console is empty because the Time input types are not picked up by jQuery:

使用序列化数据进行后端Ajax调用的代码如下。控制台中的打印输出为空，因为jQuery没有捕获到时间输入类型

$("#editForm").on("submit", function(event) {

    console.log($("editForm").serializeObject());
    $.ajax({
        url: "/Items/SaveItem/",
        type: "POST",
        data: $("#editForm").serializeObject(),
        success: function(data) {
            
            if (data.message == "OK") {
                success("Item has been successfully saved!");
                }
        },
        
    });

});

问题解决：

You might try my codes. You have asp-for taghelper so that I create an asp.net-core MVC application for test. Here's my controller and model.

您可能想试试我的代码。由于您使用了asp-for标签帮助器，所以我将创建一个ASP.NET Core MVC应用程序来进行测试。以下是我的控制器和模型。

public IActionResult SubmitDate() {
    var model = new MyTime { FromTime=DateTime.Now, ToTime=DateTime.Now.AddHours(3)};
    return View(model); 
}

[HttpPost]
public string PostTime(MyTime myTime) { 
    return "success";
}

public class MyTime {
    public DateTime FromTime { get; set; }
    public DateTime ToTime { get; set; }
}

And here's my view.        以下是我的视图

@model WebAppMvc.Controllers.MyTime;

<form id="editForm" asp-action="PostTime" asp-controller="Form">
    <table>
        <tr>
            <th>From Time: </th>
            <td style="background-color:white;">
                <input type="time" placeholder="HH:MM" name="FROMTIME" value="@Model.FromTime" asp-for="FromTime" required form="editForm" />
            </td>
        </tr>
        <tr>
            <th>To Time: </th>
            <td style="background-color:white;">
                <input type="time" placeholder="HH:MM" name="TOTIME" value="@Model.ToTime" asp-for="ToTime" required form="editForm" />
            </td>
        </tr>
    </table>
    <button type="submit">
        Submit
    </button>
</form>

@section Scripts{
    <script>
        $("#editForm").on("submit", function (e) {
            console.log($("#editForm").serialize());
            alert(1);
            e.preventDefault();
            $.ajax({
                url: "/Form/PostTime/",
                type: "POST",
                data: $("#editForm").serialize(),
                success: function (data) {
                    alert(data);
                },
            });
        });
    </script>
}