Validation: set maxlength of a text box using MVC validation

Given a view model as below:

public class EmployeeFormViewModel

{

[Required(ErrorMessage = "*")]

    [StringLength(20,ErrorMessage = "Max length 20 characters")]
    public string Name { get; set; }

}


And when client validation and unobtrusive JavaScript are enabled in a MVC 3 app in web.config in the root directory:

  <appSettings>
    <add key="ClientValidationEnabled" value="true"/> 
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/> 
  appSettings>

A view:

<h2>Employee Formh2>
@using (Html.BeginForm("Employee","SaveEmployeeForm","Home",FormMethod.Post)){
    @Html.TextBoxFor(model=>model.Name)
    <br />
    <input type="submit" value="Submit" />
}

renders into Html on the client side:

<form action="/SaveEmployeeForm/Home?Length=4" method="post">
 <input data-val="true" 
  data-val-length="Name must not be longer than 20 characters long" 
  data-val-length-max="20" 
  data-val-required="*" 
  id="Name" 
  name="Name" 
  type="text" 
  value="" />    
 <br />
    <input type="submit" value="Submit" />
form>

This works great: it shows the error message when the user types a name longer than 20 characters and leaves the text box.  But it still allows the user to type in more than 20 letters before the focus leaves the text box.

  




What if I want to keep the user from keying in 20 characters? 







Well, the maxlength attribute of the input tag is the answer.  When it is set to 20, the user is only allowed to type in 20 characters.  I really don't want to keep setting "maxlength" to every single text box that I create and more importantly I want validation attribute "StringLength" to control this value.  But the generated code does not set the "maxlength" attribute.  How do I set the value of maxlength attribute using the value of data-val-length-max attribute?









A little JQuery sweetness does the trick:


<script language="javascript" type="text/javascript">

    $(document).ready
    (
        function () {
            $('input[data-val-length-max]').each
            (
                function (index) {
                    $(this).attr('maxlength', $(this).attr('data-val-length-max'));
                })
        });
script>

What the code above says is that for every input tag with the attribute of "data-val-length-max", use the value of it to set the value of "maxlength" attribute.

Custom Routing in MVC

In MVC, by default, out of the box routing pattern is {controller}/{action}/{id} where id is optional as defined in the Global.asax.cs:

            routes.MapRoute
                (
                    "Default", // Route name
                    "{controller}/{action}/{id}", // URL with parameters
                    new {controller = "Home", action = "Index", id = UrlParameter.Optional} // Parameter defaults
                );

However, this will not always meet your needs.  In such case, you can create custom routes.  For instance, let's say it is a requirement that the "HR (Human Resource)"  department of your company should have their own unique URL in a pattern like this: "Hr/PersonalProfile/Display/1234".  Custom route can be utilized to make this work:

            routes.MapRoute
                (
                    "Hr", // The name must be unique in a route table
                    "Hr/PersonalProfile/{action}/{id}", // URL with parameters
                    new {controller = "PersonalProfile", action = "Display", id = UrlParameter.Optional} // Parameter defaults                );

Now you can display a personal profile using this URL: http://{yourdomian}/Hr/PersonalProfile/Display/1234

One very important thing to note is that MVC tries to find matching route in the order of the routes registration.

In our example, the custom route "Hr" must be registered before the default route is.  Otherwise, when the site is accessed with the URL "http://{yourdomian}/Hr/PersonalProfile/Display/1234", it matches the default route and it will try to look for a controller named "Hr" which doesn't exist.  This, of course, results in an error as below:

Server Error in '/' Application.

---

The resource cannot be found.

Description: HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

Requested URL: /Hr/PersonalProfile/Display

Phil Haack created a very useful tool for debugging MVC routing: route debugger and you can get it through NuGet package management tool.  Just type in the following command in Package Manager Console:

PM> install-package routedebugger

If you're not familiar with NuGet, read about it here.  And download it from here.