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

Question

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

Below is the Form which consists of 2 fields: FROMTIME and 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.

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

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.

Any ideas please?

Is there a way to force the user to input hour and minutes in the format of 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:

$("#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!");
                }
        },
        
    });

});

Answer 1

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.

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>
}