Validate datetime asp net textbox with jquery/javascript

Question

I have this asp net textbox that I wish to validate so that user can input american time or without colon for example: "10:00 PM" or "1230 AM" since my code behind requires it to be a valid datetime: "yyyy-mm-dd hh:mm" I need it to be formatted on the client side. How should I do this?

ASPX:

<asp:TextBox Style="float: right;" Width="50" CssClass="TellusTextBox" ClientIDMode="Static" ID="txtArrivalTime" runat="server" />

<asp:TextBox Style="float: right;" Width="50" CssClass="TellusTextBox" ClientIDMode="Static" ID="txtDepartureTime" runat="server" />

JavaScript:

function ValidateDateTime(value) {
    //logic here
}

Answer 1

 <asp:TextBox Style="float: right;" Width="100" CssClass="TellusTextBox" ClientIDMode="Static" ID="txtArrivalTime" runat="server" type="time" placeholder="hrs:mins" value="" pattern="^([0-1]?[0-9]|2[0-4]):([0-5][0-9])(:[0-5][0-9])?$" required="required" />

Answer 2

If your code-behind requires it to be a valid DateTime, then validate it on the server-side as well. Javascript can easily be switched off / bypassed / manipulated. It's nice for improving usability, but you can't trust it. The code-behind will have to perform the validation again when the form is submitted, if you want to be certain it's a correct value.

ASP.NET Forms provides Validator controls which neatly provide both client- and server-side validation for you, without you having to write and maintain both pieces of code separately.

For this, you can use a RegularExpressionValidator which will use regular expressions to match the characters in the string. This will match times in the two 12-hr formats you showed above, including the AM/PM at the end:

<asp:RegularExpressionValidator runat="server" ID="val_reg_ArrivalTime"  ControlToValidate="txtArrivalTime" ValidationExpression="^(0[1-9]|1[0-2])(:){0,1}[0-5][0-9] (AM|PM)$" ErrorMessage="Time must be in this format: hh:mm AM/PM" CssClass="errormessage" SetFocusOnError="true" Display="Dynamic" />

Alternatively, it might be more reliable and clearer, and easier/shorter for users to type, to accept a 24-hr format instead (ie hh:mm). Subsitute this regular expression instead for 24-hour times:

^([0-9]|(0|1)[0-9]|2[0-3]):[0-5][0-9]$

With both of these, there's no need to write any custom .NET or JavaScript code - the validation control takes care of it for you.

Find out more about the available validation controls here: https://msdn.microsoft.com/en-us/library/debza5t0.aspx NB For future reference is does also include a "custom" validator for when the standard controls don't do what you need. It gives you a framework into which you can insert custom JS and C# code, but have it handled in the same way as the standard controls.