Validating time-only input in asp.net MVC unobtrusive validation

Question

I have two separate fields on the page: one for date and one for time.

This is the model:

[Required]
[DisplayFormat(ApplyFormatInEditMode = true, Dat         


        

Answer 1

In your view model try this

    [Display(Name = "Start Time")]
    [Time]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
    public DateTime Time { get; set; }

and have the attribute class

public class TimeAttribute : ValidationAttribute, IClientValidatable
{
    public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata,
                                                                        ControllerContext context)
    {
        yield return new ModelClientValidationRule
        {
            ErrorMessage = ErrorMessage,
            ValidationType = "time"
        };
    }

    public override bool IsValid(object value)
    {
        DateTime time;
        if (value == null || !DateTime.TryParse(value.ToString(), out time))
            return false;

        return true;
    }
}

EDIT: I'm also aware that in some cases you need to add some scripting to the client html such as that found in this answer MVC3 unobtrusive validation group of inputs although I'm not exactly sure when its necessary. This answer should get you half way there. Unfortunately, I'm not sure this answer prevents the postback, but it does flag the model as invalid.

Answer 2

Honestly the easiest way to achieve this is to use a regular expression validator for it. Here is an example.

[RegularExpression(@"^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$", ErrorMessage = "Invalid Time.")]

The unobtrusive validation should work just fine with this expression.

Hope this can help you!

EDIT

I've fixed the regular expression which started throwing errors in the console because of some illegal characters. Also, you will need a string property wrapper for this property or else it will always look for a valid DateTime.

Below is what you should be binding to.

Model:

public DateTime? StartTime { get; set; }

[Required]
[RegularExpression(@"^(0[1-9]|1[0-2]):[0-5][0-9] (am|pm|AM|PM)$", ErrorMessage = "Invalid Time.")]
public string StartTimeValue
{
    get
    {
        return StartTime.HasValue ? StartTime.Value.ToString("hh:mm tt") : string.Empty;
    }

    set
    {
        StartTime = DateTime.Parse(value);
    }
}

View:

@Html.TextBoxFor(m => m.StartTimeValue)

Answer 3

Add DataType.Time attribute to your time field and use EditorFors to remove format duplication:

Model

    [Required]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:hh:mm tt}")]
    [DataType(DataType.Time)]
    public DateTime? StartTime { get; set; }

    [Required]
    [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:MM/dd/yyyy}")]
    public DateTime Date { get; set; }

View

    @Html.EditorFor(m => m.Date, new { type = "text" })
    @Html.EditorFor(m => m.StartTime, new { type = "text", id = "timeStart" })