MVC 3 jQuery Validation/globalizing of number/decimal field

Question

When using globalization culture="da-DK" in the Web.config file, the jQuery validation does not work.

In Denmark, we use the notation 19,95 instead of the US way 19.95 when we write a price for at product, and that have given me a problem, that I can't solve.

I've started VS2010, new MVC 3 project, added a homeController, a Product class, and a simple standard edit view and the error is already there.

Product Class:

public class Product {     public string name { get; set; }     public string itemNo { get; set; }     public decimal price { get; set; } } 

HomeController:

public class homeController : Controller {     public ActionResult Index()     {         var product1 = new Product { name = "Testproduct", itemNo = "PRD-151541", price = 19 };         return View(product1);     } } 

Index View:

@model WebUI.DomainModel.Product  <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>  @using (Html.BeginForm()) {     @Html.ValidationSummary(true)     <fieldset>         <legend>Product</legend>          <div class="editor-label">             @Html.LabelFor(model => model.name)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.name)             @Html.ValidationMessageFor(model => model.name)         </div>          <div class="editor-label">             @Html.LabelFor(model => model.itemNo)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.itemNo)             @Html.ValidationMessageFor(model => model.itemNo)         </div>          <div class="editor-label">             @Html.LabelFor(model => model.price)         </div>         <div class="editor-field">             @Html.EditorFor(model => model.price)             @Html.ValidationMessageFor(model => model.price)         </div>          <p>             <input type="submit" value="Save" />         </p>     </fieldset> } 

The result:

Unfortunately I can't submit an image here - so please follow this link to see the result: http://www.designvision.dk/temp/mvc3_razor_validation_error.gif

SO - when running the website, the field will be set to 19,00 - which IS the correct culture definition - but when trying to save, validation fails.

Please help...

Answer 1

You could try the jQuery Globalization plugin from Microsoft:

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>  <script src="@Url.Content("~/Scripts/jquery.glob.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/globinfo/jquery.glob.da-dk.js")" type="text/javascript"></script> <script type="text/javascript">     $.validator.methods.number = function (value, element) {         return !isNaN($.parseFloat(value));     }      $(function () {         $.preferCulture('da-DK');     }); </script> 

---

Plugin was renamed and moved, you should use Globalize (Mar 2012)

<script src="@Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.da-DK.js")" type="text/javascript"></script> <script type="text/javascript">     $.validator.methods.number = function (value, element) {         return !isNaN(Globalize.parseFloat(value));     }      $(document).ready(function () {         Globalize.culture('da-DK');     }); </script> 

more about this on Scott Hanselman blog post

---