Unobtrusive jQuery Validation Using MVC3 and Razor

Introduction to Razor

Razor continues the valuable MVC tradition of model based validation that works on both the client and the server. MVC3 adds the ability to use jQuery and unobtrusive validation to the default toolkit while still allowing you to write your own custom client side validation where necessary. Razor simplifies the syntax of generating model validated forms to speed your development time.

Rich user interface web applications must closely control the amount of JavaScript sent to the client because every line of JavaScript code has to be downloaded by the client and each individual JavaScript file is a separate web request that introduces additional latency. MVC3 allows you to use the jQuery validation library instead of the Microsoft MVC validation libraries. This is very valuable if your web application is already using jQuery as many rich UI web applications do.

Using jQuery to perform validation and using jQuery's AJAX methods to call REST MVC services allows you to completely de-reference the Microsoft MVC and ASP.NET AJAX libraries and use a pure jQuery approach to your client side. The result is your client code will all leverage the same framework and it will save your end users from downloading 3 files weighing in at a total of about 114k.

Unobtrusive validation leverages the jQuery unobtrusive validation plug-in to allow simple inline HTML element attributes to define what validation rules should be enforced. The result is very efficient validation that doesn't clutter up the HTML. Clean and neat HTML allows for the fastest page load times possible. Generated pages have sophisticated validation with the minimum page download size imaginable.

Razor improves on the ASPX syntax for building model bound forms. Razor's @ syntax for field rendering requires fewer keystrokes and the improved intellisense support for the bound model accelerates development speed.

Model Validation Attributes

The .NET framework provides a number of attributes that you can apply to your object model to validate against. These attributes are found in the System.ComponentModel.DataAnnotations namespace and are applied to the properties on your object.

If you are using the Entity framework and want to apply model validation attributes to your Entity Framework objects, you can create a partial class to add this markup.

  • Required - Indicates that this field must have a value.
  • Range - The value provided must be between two numbers.
  • StringLength - Defines the maximum length of a string.
  • RegularExpression - Specifies a regular expression for complex pattern matching validation.
  • CustomValidation - Allows you to define custom code to validate the attribute.
  • DisplayName - When the model's labels are rendered, the DisplayName attribute defines the name that will be shown to the end user.

  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using System.ComponentModel.DataAnnotations;
  using System.ComponentModel;
  
  namespace UnobtrusiveMVC.Models
  {
      public class Boat
      {
          [Required]
          [StringLength(20,ErrorMessage="Avast! Yarr boat name must be less than 20 characters matey!")]
          [DisplayName("Boat Name")]
          public string BoatName { get; set; }
  
          [Required]
          [StringLength(20)]
          [RegularExpression(@"Captain.*",ErrorMessage="Your captain name must start Captain!")]
          [DisplayName("Captain's Name")]
          public string CaptainName { get; set; }
  
          [Required,Range(0,100)]
          public int CaptainSaltinessPercent { get; set; }
      }
  }

Creating the Razor Page with Validation

To enable unobtrusive validation, you can either enable it site-wide in your web.config or you can enable it on a per-page basis by using the Html.EnableUnobtrusiveJavaScript(true) function in the page header.

Consistency is the central pillar of usability and using the web.config approach will enable unobtrusive validation across your entire web site. If you need to opt out specific pages later, you can always use the Html.EnableUnobtrusiveJavaScript(false) function to disable it.

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

The @Html.ValidationSummary command defines how your errors are displayed. If you want ASP.NET to automatically generate an error list as a <UL> collection, use @Html.ValidationSummary(false). If you want to specify the exact place each error message is placed for each element, use @Html.ValidationSummary(true). You can use the auto-generated summary side-by-side with custom placed error message elements.

Inline Validation

It is a web form usability best practice to include inline error messages next to the fields that have failed validation. This allows the user to see the message describing the problem right next to where they need to fix it in order to continue.

If you want to specify the exact location your error messages, will appear, you can use the @Html.ValidationMessageFor to specify the location on the page you want the validation messages for a specific element to be placed. If this function is used, all validation errors will be rendered at the specified location.

  @Html.ValidationMessageFor(model => model.BoatName)
  When it is rendered out to the user's browser, the HTML below will be written:
  <span class="field-validation-valid" data-valmsg-for=" BoatName" data-valmsg-replace="true"></span> 
  

It is worth noting that the validation message HTML is only a placeholder. The HTML tags on the field itself define the message that will be displayed.

Rendering Fields To Be Validated

To render the fields that leverage the validation, you will need to define the proper model in the header of your page and render your fields Razor's @Html helpers. Rendering the actual fields to be validated requires rendering the field to be validated and rendering a container that the error message will be displayed in.

  • @Html.TextBoxFor - Standard textbox.
  • @Html.HiddenFor - A hidden field that stores a value but renders no visible UI element to the page.
  • @Html.DropDownListFor - A drop down list that allows the user to choose one option from a list of options.
  • @Html.CheckBoxFor - A single checkbox option.
  • @Html.ListBoxFor - A multi-select listbox bound to an array of options.
  • @Html.PasswordFor - A password field.
  • @Html.RadioButtonFor - A single radio button option.
  • @Html.TextAreaFor - Multi-Line text area.
  • @Html.DisplayFor - Generic display, will follow what is set in the UI Hints.

  @model UnobtrusiveMVC.Models.Boat
  @{
      View.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
      Html.EnableUnobtrusiveJavaScript(true);
  }
  <h2>Index</h2>
  @using (Html.BeginForm()) {
      
      @Html.ValidationSummary(true)
      <fieldset>
      @Html.ValidationMessageFor(model => model.BoatName)
      @Html.ValidationMessageFor(model => model.CaptainName)
  
      <div class="editor-label">
          @Html.LabelFor(model => model.BoatName)
      </div>
      <div class="editor-field">
          @Html.TextBoxFor(model => model.BoatName)
      </div>
      <div class="editor-label">
          @Html.LabelFor(model => model.CaptainName)
      </div>
      <div class="editor-field">
          @Html.TextBoxFor(model => model.CaptainName)
      </div>
      
      <input type="submit" value="Save"></fieldset>
  }

You can also manually render the HTML for the data you wish to collect. For example, if you wanted to custom render the HTML for a text box that will make sure the fields starts with "David", you could do so by using the HTML below:

  <input data-val="true" data-val-length="Too long." data-val-regex-pattern="David.*" data-val-regex="The Manual Validated Field must start with David." data-val-length-max="10" data-val-required=" Manual Validated Field is required." id="ManualField" name="ManualField" type="text" value="" />

Conclusion

MVC3 is a dramatic step forward for the creation of web applications with sophisticated client-side validation without a lot of client side coding. The ability to define validation rules in the model and have those rules enforced on both the client and the server helps the user and makes your code more maintainable.



Related Articles

Downloads

Comments

  • Les meilleurs lisseur GHD sur la boutique web à Bergen

    Posted by odvigw332 on 07/16/2013 05:34pm

    GHD rettang 7 brosse avec des ions actifs est une innovation révolutionnaire dans les soins capillaires, et est conçu pour permettre aux femmes de toujours être en mesure de regarder leur meilleur out.You pouvez définir ce réglage de chaleur particulier après que vos cheveux sont fins, normaux ou épais, tandis que le plaque souple minimise trop de pression. Le résultat est beau, coiffures élégantes avec décoloration minime. [url=http://ghdpascherfer.webgarden.es/]lisseur ghd styler[/url] Comme nous le savons tous, lisseur ghd maintenant un nom de ménage. mais il ya encore beaucoup de gens se plaignent de leurs prix élevés, cela a aussi conduit à beaucoup de gens ne peuvent pas posséder lisseur ghd. En fait, vous pouvez acheter un bon marché lisseur ghd straightener.ghd bon marché est accueilli par le peuple. Ils peuvent également répondre à vos besoins. En 2001, les redresseurs ghd pas cher engagés à développer les produits les plus efficaces et innovantes pour l'industrie des soins capillaires. Creats GHD différents et belle lisseurs ghd conduisent à des résultats étonnants. [url=http://ghdpascherfer.hpage.com/]lisseur ghd pas cher[/url] GHD pas cher est tout ce que vous aviez trenge å lage parfait volum boucles de terrassement et de droite, grâce à sa technologie de pré-paiement et funksjoner intelligent. L'acquisition de nouveaux GHD plat Strykejern portée de main! Corps Avrundet donne une plus grande flexibilité dans le style et ils sont en mode veille - les plaines signifie que si vous n'avez pas Bruker pendant une demi-heure, ils ont juste si "bon taux" et détournez! Je appelant également tout un tas d'autres avanserte funksjoner, inkludert mode de protection contre la pluie j'aime tribunaux appelés ROM, réplique numérique de la température et céramique Høy-art plaqueur et vous verrez bientôt que noen spenning!

    Reply
  • Short posting illustrates the indisputable details on chanel and the way that it could actually may affect people.

    Posted by emeseesip on 05/07/2013 05:00am

    Most Likely The Most Detailed nike Handbook You Ever Witnessed Otherwise Your Cash Back [url=http://www.guccija.biz/]gucci 財布[/url] Omg, incredible item. You must view adidas right now when it is still in store ! ! [url=http://www.guccija.biz/]グッチ 財布 メンズ[/url] nike helps every one of us by including a lot of one of a kind functions and functions. It's a unvaluable thing for any supporter of adidas. [url=http://www.guccija.biz/]グッチ トートバッグ[/url] Honest study divulges A number of all new things of adidas that absolutely no one is mentioning. [url=http://www.chanelja.biz/]シャネル マトラッセ[/url] This is why absolutely no one is bringing up gucci and precisely what you should accomplish this afternoon. [url=http://www.chanelja.biz/]シャネル 長財布[/url] Progressive questions on nike answered and the reasons you really need to review each and every term on this expose. [url=http://www.chanelja.biz/]chanel 財布[/url] The essentials of the nike that one can really benefit from starting today.[url=http://www.nikeja.biz/]ナイキスニーカー[/url] The way to understand all sorts of things there is to find out concerning gucci in Two easy ways.

    Reply
  • As to the reasons all things you've heard of nike is wrong and what you want to understand.

    Posted by Updatatweda on 05/04/2013 07:53am

    C [url=http://www.adidaskutuja.com/]アディダス スニーカー[/url] cdDzy UnlLhl IdkEkn UliI [url=http://www.adidaskutuja.com/adidas-originals-c-4.html]アディダス ランニング[/url] qxNnuWjy IboUfmFjzO [url=http://www.adidaskutuja.com/adidas-superstar-c-2.html]adidas superstar[/url] gy UkfAdg [url=http://www.adidaskutuja.com/jeremy-scott-c-5.html]アディダス 通販[/url]NcoSsr PdvUkx

    Reply
  • Abnormal editorial supplies the simple truth around nike which just a couple of people know.

    Posted by icoppyapedcap on 04/25/2013 03:53pm

    SucPpbMjjLpq [url=http://www.nikeyasuijp.com/]ナイキ[/url]RkzInoUldJnn [url=http://www.nikeyasuijp.com/nike-air-force1エアフォース1-c-14.html]nike air force[/url]AjzHhwJpoCkz [url=http://www.nikeyasuijp.com/nike-air-maxエアマックス-c-12.html]ナイキ エアマックス[/url]NftUgkVfwMag [url=http://www.nikeyasuijp.com/nike-air-jordanエア-ジョーダン-c-13.html]ナイキランニング[/url]MwnDyuBnqUzl

    Reply
Leave a Comment
  • Your email address will not be published. All fields are required.

Top White Papers and Webcasts

  • Corporate e-Learning technology has a long and diverse pedigree. As far back as the 1980s, companies were adopting computer-based training to supplement traditional classroom activities. More recently, rich web-based applications have added streaming audio and video, real-time collaboration and other new tools to the e-Learning mix. At the same time, the growing availability of informal learning tools--a category that includes everything from web searches to social media posts--are having a major impact on …

  • Java developers know that testing code changes can be a huge pain, and waiting for an application to redeploy after a code fix can take an eternity. Wouldn't it be great if you could see your code changes immediately, fine-tune, debug, explore and deploy code without waiting for ages? In this white paper, find out how that's possible with a Java plugin that drastically changes the way you develop, test and run Java applications. Discover the advantages of this plugin, and the changes you can expect to see …

Most Popular Programming Stories

More for Developers

Latest Developer Headlines

RSS Feeds