Search code examples
c#asp.net-mvcviewdata-annotationstimespan

How to prevent a user from entering wrong time format(Client-side)

My model includes two properties that hold the time. I want to user enter the times in view and prevent it from wrong values for example(07:66) if you know a way in JQuery mask its ok.

public class WeeklyVW
{
   [StringLength(5)]
 //or time span
    public string Ws_startTime { get; set; }
   [StringLength(5)]
    public string Ws_EndTime { get; set; }
}

in view

@Html.TextBoxFor(m => m.Starthour, new { data_mask = "00:00", @class = "form-control" })
Solution

  • You can achieve your functonality by decorating your model attribute with [DataType(DataType.Time)] and then formatting the time input field according to your need. The second thing that you require is to use the EditorFor tag instead of TextBoxFor in order for this to work. Your code would look like:

    Model:

    public class WeeklyVW
{
  [StringLength(5)]
  //or time span
  public string Ws_startTime { get; set; }
  [StringLength(5)]
  public string Ws_EndTime { get; set; }

  [Required]
  [DataType(DataType.Time)]
  [DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:HH}")]
  public string Starthour {get;set;}
}

    Conntroller:

    public ActionResult Index()
{
    return View(new WeeklyVW());
}

    View:

    @model HelloWorldMvcApp.WeeklyVW
@{
    Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>

        <!-- CSS Includes -->
        <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

        <style type="text/css">

            .field-validation-error {
                color: #ff0000;
            }

        </style>
    </head>

    <body>
        <div class="container">
            <div class="col-md-6 col-md-offset-3">
                <h1>Time Input Example</h1>
    @Html.EditorFor(m => m.Starthour, new { data_mask = "00:00", @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Starthour)    
            </div>
        </div>

        <!-- JS includes -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
        <script src="//ajax.aspnetcdn.com/ajax/mvc/4.0/jquery.validate.unobtrusive.min.js"></script>

    </body>
</html>

    A working example of the application can be found at: https://dotnetfiddle.net/6GpRBu Or 

      @Html.TextBoxFor(m => m.EndHour, new { @class = "form-control ", @type = "time" })

    if the length equals 5 textbox cant get anymore values Model

      [StringLength(5)]
  public string EndHour{ get; set;}