title: ASP.NET MVC input validation to allow only two digit numbers on a model property that is string type
body: <p>The input values can be any two digit numbers of the form <code>00, 01,...09,10,11,....19,20,...,99</code> etc. But following is not working. User can still enter <code>abc</code> and no client side validation occurs. Of course the error occurs after the form is posted since SQL Server does not except, for example,  <code>abc</code> in a char(2) column. It needs to occur during client side validation as explained <a href="https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation" rel="nofollow noreferrer">here</a>. What I may be missing?</p>
  
  <p><strong>Note</strong>: Not using data type as number since it would force 01 to 1, 02 to 2 ,... etc. It has to be of the type 01, 02,  ...,etc.</p>
  
  <p><strong>Model Snapshot</strong>:</p>
  
  <pre><code>Column[TypeName = "char(2)"]
  [RegularExpression(@"^[0-9]{2,2}$", ErrorMessage = "Must be two digits numbers"), StringLength(2)]
  public string TestCode { get; set; }
  </code></pre>
  
  <p><strong>Views\Shared\Components\Default.cshtml</strong></p>
  
  <pre><code> &lt;form asp-controller="TestController" asp-action="TestAction" method="post"&gt;
         &lt;div asp-validation-summary="All" class="text-danger"&gt;&lt;/div&gt;
         ....
         ....
         &lt;div class="form-group"&gt;
             &lt;label asp-for="TestCode" class="col-md-2 control-label"&gt;&lt;/label&gt;
             &lt;div class="col-md-2"&gt;
                 &lt;input asp-for="TestCode" class="form-control" /&gt;
                 &lt;span asp-validation-for="TestCode" class="text-danger"&gt;&lt;/span&gt;
             &lt;/div&gt;
         &lt;/div&gt;
          &lt;button type="submit" name="submit" value="TestVal"&gt;Save&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I'm using Visual Studio 2015 with latest update -3 and ASP.NET Core 1.1. The project is created using their default Web App Core template that includes built-in JQuery, JQuery-Validation, bootstrap etc. Following is the snapshot of the html generated in Google Chrome Dev Tool.</p>
  
  <p><em>Snapshot of Google Chrome Dev Tool</em>:</p>
  
  <pre><code>&lt;label class="col-md-2 control-lable" for="TestCode"&gt;TestCode&lt;label&gt;
  &lt;div class="col-md-2"&gt;
     &lt;input class="form-control" type="text" id="TestCode" name="TestCode" value&gt;
     &lt;span class="text-danger field-validation-valid" data-valmsg-for="TestCode" data-valmsg-replace="true"&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>UPDATE 2:</strong></p>
  
  <p>When user clicks on Tab2 of the Main View (with Bootstrap Tabstrip), an Ajax code (shown below) displays a Partial view in Tab2 content pane that displays a list of various buttons. When user clicks on one of those buttons, same controller (shown below) calls a <code>ViewComponent</code> that displays the view in question (please see this ViewComponent view before <code>UPDATE</code> section above).</p>
  
  <p><strong>Controller</strong>:</p>
  
  <pre><code>[HttpGet]
  public IActionResult TestAction(string calledFrom, int SelectedOrderYear, int id)
  {
      ....
      return ViewComponent("Test_VC", new { id = id });
  }
  </code></pre>
  
  <p><strong>Main View with Bootstrap Tabs</strong>:</p>
  
  <pre><code>@model MyProj.Models.TestViewModel
  ....
  ....
  &lt;ul class="nav nav-tabs"&gt;
    &lt;li id="menu1ID" class="active"&gt;&lt;a data-toggle="tab" href="#menu1"&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
    &lt;li id="menu2ID"&gt;&lt;a data-toggle="tab" href="#menu2"&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div class="tab-content"&gt;
    &lt;div id="menu1" class="tab-pane fade"&gt;        
    &lt;/div&gt;
    &lt;div id="menu2" class="tab-pane fade"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  @section scripts
  
  $('#myTabstripID li').click(function () {
      var li_id = $(this).attr("id");
      $.ajax({
          url: '@Url.Action("TestAction", "TestController")',
          data: { calledFrom: li_id },
          contentType: 'application/json',
          dataType: 'html',
          type: 'GET',
          cache: false,
          success: function (data) {
              if (li_id == 'menu1ID')
                  $('#menu1').html(data);
              else if (li_id == 'menu2ID')
                  $('#menu2').html(data);
          }
      });
  });
  </code></pre>