Adding Validation

In this this section you'll add validation logic to the Movie model, and you'll ensure that the validation rules are enforced any time a user attempts to create or edit a movie using the application.

Keeping Things DRY

One of the core design tenets of ASP.NET MVC is DRY ("Don't Repeat Yourself"). ASP.NET MVC encourages you to specify functionality or behavior only once, and then have it be reflected everywhere in an application. This reduces the amount of code you need to write and makes the code you do write less error prone and easier to maintain.

The validation support provided by ASP.NET MVC and Entity Framework Code First is a great example of the DRY principle in action. You can declaratively specify validation rules in one place (in the model class) and the rules are enforced everywhere in the application.

Let's look at how you can take advantage of this validation support in the movie application.

Adding Validation Rules to the Movie Model

You'll begin by adding some validation logic to the Movie class.

Open the Movie.cs file. Notice the System.ComponentModel.DataAnnotations namespace does not contain System.Web. DataAnnotations provides a built-in set of validation attributes that you can apply declaratively to any class or property. (It also contains formatting attributes like DataType that help with formatting and don't provide any validation.)

Now update the Movie class to take advantage of the built-in Required, StringLength, and Range validation attributes. Replace the Movie class with the following:

public class Movie
{
   public int ID { get; set; }

   [StringLength(60, MinimumLength = 3)]
   public string Title { get; set; }

   [Display(Name = "Release Date")]
   [DataType(DataType.Date)]
   public DateTime ReleaseDate { get; set; }

   [Required]
   public string Genre { get; set; }

   [Range(1, 100)]
   [DataType(DataType.Currency)]
   public decimal Price { get; set; }

   [StringLength(5, MinimumLength = 1)]
   public string Rating { get; set; }
}

We will use migrations to update the schema. Build the solution, and then open the Package Manager Console window and enter the following commands:

add-migration DataAnnotations
update-database

When this command finishes, Visual Studio opens the class file that defines the new DbMIgration derived class with the name specified (DataAnnotations), and in the Up method you can see the code that updates the schema constraints:

public override void Up()
{
    AlterColumn("dbo.Movies", "Title", c => c.String(maxLength: 60));
    AlterColumn("dbo.Movies", "Genre", c => c.String(nullable: false));
    AlterColumn("dbo.Movies", "Rating", c => c.String(maxLength: 5));
}

 The Genre field is are no longer nullable (that is, you must enter a value). The Rating field has a maximum length of 5 and Title has a maximum length of 60.  The minimum length of 3 on Title  and the range on Price do not create schema changes.

The validation attributes specify behavior that you want to enforce on the model properties they are applied to. The Required and MinimumLength attributes indicates that a property must have a value; in this sample, a movie has to have a value for the Title, ReleaseDate, Genre, and Price properties in order to be valid.  The Range attribute constrains a value to within a specified range. The StringLength attribute lets you set the maximum length of a string property, and optionally its minimum length. Value types (such as decimal, int, float, DateTime) are inherently required  and don't need the Required attribute. Note that the Required and MinimumLength attributes don't prevent a user from entering white space, to prevent that you could use a RegularExpression attribute. For example the following code requires the first character to be upper case and the remaining characters to be alphabetical:

[RegularExpression(@"^[A-Z]+[a-zA-Z''-'\s]*$")]

Code First ensures that the validation rules you specify on a model class are enforced before the application saves changes in the database. For example, the code below will throw an exception when the SaveChanges method is called, because several required Movie property values are missing.

MovieDBContext db = new MovieDBContext();

Movie movie = new Movie();
movie.Title = "Gone with the Wind";

db.Movies.Add(movie);  
db.SaveChanges();        // <= Will throw server side validation exception  

Having validation rules automatically enforced by the .NET Framework helps make your application more robust. It also ensures that you can't forget to validate something and inadvertently let bad data into the database.

Validation Error UI in ASP.NET MVC

Run the application and navigate to the /Movies URL.

Click the Create New link to add a new movie. Fill out the form with some invalid values. As soon as jQuery client side validation detects the error, it displays an error message.

Notice how the form has automatically used a red border color to highlight the text boxes that contain invalid data and has emitted an appropriate validation error message next to each one. The errors are enforced both client-side (using JavaScript and jQuery) and server-side (in case a user has JavaScript disabled).

A real benefit is that you didn't need to change a single line of code in the MoviesController class or in the Create.cshtml view in order to enable this validation UI. The controller and views you created earlier in this tutorial automatically picked up the validation rules that you specified by using validation attributes on the properties of the Movie model class.

The form data is not sent to the server until there are no client side validation errors. You can test this by putting a break point in the HTTP Post method or using the fiddler tool or the IE  F12 developer tools.

How Validation Occurs in the Create View and Create Action Method

You might wonder how the validation UI was generated without any updates to the code in the controller or views. The next listing shows what the Create methods in the MovieController class look like. They're unchanged from how you created them earlier in this tutorial.

public ActionResult Create()
{
    return View() ;
}

// POST: /Movies/Create
// To protect from over posting attacks, please enable the specific properties you want to bind to, for 
// more details see http://go.microsoft.com/fwlink/?LinkId=317598.
// 
// Example: public ActionResult Update([Bind(Include="ExampleProperty1,ExampleProperty2")] Model model)
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(
    [Bind(Include="ID,Title,ReleaseDate,Genre,Price")]
    Movie movie)
{
    if (ModelState.IsValid)
    {
        db.Movies.Add(movie);
        db.SaveChanges();
        return RedirectToAction("Index");
    }

    return View(movie);
}

The first (HTTP GET) Create action method displays the initial Create form. The second ([HttpPost]) version handles the form post. The second Create method (The HttpPost version) calls ModelState.IsValid to check whether the movie has any validation errors. Calling this method evaluates any validation attributes that have been applied to the object. If the object has validation errors, the Create method re-displays the form. If there are no errors, the method saves the new movie in the database. In our movie example, the form is not posted to the server when there are validation errors detected on the client side; the second Create method is never called. If you disable JavaScript in your browser, client validation is disabled and the HTTP POST Create method calls ModelState.IsValid to check whether the movie has any validation errors.

You can set a break point in  the HttpPost Create method and verify the method is never called, client side validation will not submit the form data when validation errors are detected. If you disable JavaScript in your browser, then submit the form with errors, the break point will be hit. You still get full validation without JavaScript. The following image shows how to disable JavaScript in Internet Explorer.

The following image shows how to disable JavaScript in the FireFox browser.

The following image shows how to disable JavaScript in the Chrome browser.

Below is the Create.cshtml view template that you scaffolded earlier in the tutorial. It's used by the action methods shown above both to display the initial form and to redisplay it in the event of an error.

@model MvcMovie.Models.Movie

@{
   ViewBag.Title = "Create";
}

<h2>Create</h2>

@using (Html.BeginForm())
{
   @Html.AntiForgeryToken()
   @Html.ValidationSummary(true)

   <fieldset class="form-horizontal">
      <legend>Movie</legend>

      <div class="control-group">
         @Html.LabelFor(model => model.Title, new { @class = "control-label" })
         <div class="controls">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title, null, new { @class = "help-inline" })
         </div>
      </div>

      <div class="control-group">
         @Html.LabelFor(model => model.ReleaseDate, new { @class = "control-label" })
         <div class="controls">
            @Html.EditorFor(model => model.ReleaseDate)
            @Html.ValidationMessageFor(model => model.ReleaseDate, null, new { @class = "help-inline" })
         </div>
      </div>

      <div class="control-group">
         @Html.LabelFor(model => model.Genre, new { @class = "control-label" })
         <div class="controls">
            @Html.EditorFor(model => model.Genre)
            @Html.ValidationMessageFor(model => model.Genre, null, new { @class = "help-inline" })
         </div>
      </div>

      <div class="control-group">
         @Html.LabelFor(model => model.Price, new { @class = "control-label" })
         <div class="controls">
            @Html.EditorFor(model => model.Price)
            @Html.ValidationMessageFor(model => model.Price, null, new { @class = "help-inline" })
         </div>
      </div>

      <div class="control-group">
         @Html.LabelFor(model => model.Rating, new { @class = "control-label" })
         <div class="controls">
            @Html.EditorFor(model => model.Rating)
            @Html.ValidationMessageFor(model => model.Rating, null, new { @class = "help-inline" })
         </div>
      </div>

      <div class="form-actions no-color">
         <input type="submit" value="Create" class="btn" />
      </div>
   </fieldset>
}

<div>
   @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
}

Notice how the code uses an Html.EditorFor helper to output the <input> element for each Movie property. Next to this helper is a call to the Html.ValidationMessageFor helper method. These two helper methods work with the model object that's passed by the controller to the view (in this case, a Movie object). They automatically look for validation attributes specified on the model and display error messages as appropriate.

What's really nice about this approach is that neither the controller nor the Create view template knows anything about the actual validation rules being enforced or about the specific error messages displayed. The validation rules and the error strings are specified only in the Movie class. These same validation rules are automatically applied to the Edit view and any other views templates you might create that edit your model.

If you want to change the validation logic later, you can do so in exactly one place by adding validation attributes to the model (in this example, the movie class). You won't have to worry about different parts of the application being inconsistent with how the rules are enforced — all validation logic will be defined in one place and used everywhere. This keeps the code very clean, and makes it easy to maintain and evolve. And it means that that you'll be fully honoring the DRY principle.

Adding Formatting to the Movie Model

Open the Movie.cs file and examine the Movie class. The System.ComponentModel.DataAnnotations namespace provides formatting attributes in addition to the built-in set of validation attributes. We've already applied  a DataType enumeration value to the release date and to the price fields. The following code shows the ReleaseDate and Price properties with the appropriate DataType attribute.

        [DataType(DataType.Date)] 
        public DateTime ReleaseDate { get; set; }
       
        [DataType(DataType.Currency)] 
        public decimal Price { get; set; }

The DataType attributes are not validation attributes, they are used to tell the view engine how to render the HTML. In the example above, the DataType.Date attribute displays the movie dates as dates only, without time. For example, the following DataType attributes don't validate the format of the data:

[DataType(DataType.EmailAddress)]
[DataType(DataType.PhoneNumber)]
[DataType(DataType.Url)]

The attributes listed above only provide hints for the view engine to format the data (and supply attributes such as <a> for URL's and <a href="mailto:EmailAddress.com"> for email. You can use the RegularExpression attribute to validate the format of the data.

An alternative approach to using the DataType attributes, you could explicitly set a DataFormatString value. The following code shows the release date property with a date format string (namely, "d"). You'd use this to specify that you don't want to time as part of the release date.

       [DisplayFormat(DataFormatString = "{0:d}")]
       public DateTime ReleaseDate { get; set; }

The following code formats the Price property as currency.

       [DisplayFormat(DataFormatString = "{0:c}")]
       public decimal Price { get; set; }

[Range(typeof(DateTime), "1/1/1966", "1/1/2020")]

The following code shows how to combine attributes on one line:

public class Movie
{
   public int ID { get; set; }

   [Required,StringLength(60, MinimumLength = 3)]
   public string Title { get; set; }

   [Display(Name = "Release Date"),DataType(DataType.Date)]
   public DateTime ReleaseDate { get; set; }

   [Required]
   public string Genre { get; set; }

   [Range(1, 100),DataType(DataType.Currency)]
   public decimal Price { get; set; }

   [Required,StringLength(5)]
   public string Rating { get; set; }
}

In the next part of the series, we'll review the application and make some improvements to the automatically generated Details and Delete methods.

By Rick Anderson, Rick Anderson works as a programmer writer for Microsoft, focusing on ASP.NET MVC, Windows Azure and Entity Framework. You can follow him on twitter via @RickAndMSFT.

1. ← PreviousAdding a New Field
2.  You're ViewingAdding Validation
3. → NextExamining the Details and Delete Methods