MVC 3 jQuery Validation / Globalization of Number / Decimal Field

Question

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

In Denmark, we use the designation 19.95 instead of US 19.95 when we write the price of a product, and this gave me a problem that I cannot solve.

I started VS2010, the new MVC 3 project, added homeController, the Product class and a simple standard editing view, and the error already exists.

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 Type:

 @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> } 

Result:

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

SO - when the website starts, the field will be set to 19.00 - this is the correct definition of the culture, but when you try to save the confirmation is not performed.

Please, help...

Answer 1

You can 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> 

---

The plugin has been renamed and moved, you must use Globalize (March 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 on this on Scott Hanselman's blog post

---

Answer 2

Updated script for current version https://github.com/jquery/globalize with support for additional elements

 $.validator.methods.number = function (value, element) { return this.optional(element) || !isNaN(Globalize.parseFloat(value)); } $(function () { Globalize.culture('%%culture%%'); }); 

Answer 3

@shatl has the correct answer to date. Note for range attribute you will need hacked below. The complete code to add is shown below:

 @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript" src="~/Scripts/globalize.js"></script> <script type="text/javascript" src="~/Scripts/globalize.culture.fr-FR.js"></script> <script type="text/javascript"> $.validator.methods.number = function (value, element) { return this.optional(element) || !isNaN(Globalize.parseFloat(value)); } $(document).ready(function () { Globalize.culture('fr-FR'); }); jQuery.extend(jQuery.validator.methods, { range: function (value, element, param) { //Use the Globalization plugin to parse the value var val = $.global.parseFloat(value); return this.optional(element) || ( val >= param[0] && val <= param[1]); } }); </script> } 

Answer 4

I ended up following Scott Hanselman's advice on this topic on the blog - you can read about it here:

http://www.hanselman.com/blog/GlobalizationInternationalizationAndLocalizationInASPNETMVC3JavaScriptAndJQueryPart1.aspx

I had to make some changes to use Globalize instead of jQuery Global (now jQuery Global is dead). I wrote this in the following blog post in case this is helpful:

http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html

Answer 5

Just for reference in the future, what worked for me was the following:

Remember to install the correct version of jQuery and the correct culture, which is Danish in this example.
If the value cannot have periods, then uncomment the comment.

 <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> <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> <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) { // if (value.indexOf(".") >= 0) { // return false; // } return (Globalize.parseFloat(value)); } $(document).ready(function () { Globalize.culture('da-DK'); }); jQuery.extend(jQuery.validator.methods, { range: function (value, element, param) { //Use the Globalization plugin to parse the value var val = Globalize.parseFloat(value); return this.optional(element) || (val >= param[0] && val <= param[1]); } }); </script> 

Answer 6

Thanks for this page, saved me a lot of trouble, I had to correct the globalization code, as always. The Swedish culture does not accept the period as a separator, but since parseFloat uses the main javasacript parsing points, they will be counted as decimal separators, but they will be rejected on the server side. To fix this, I redefine parseFloat as follows

 Globalize.orgParaseFloat = Globalize.parseFloat; Globalize.parseFloat = function(value) { var culture = this.findClosestCulture(); var seperatorFound = false; for (var i in culture.numberFormat) { if (culture.numberFormat[i] == ".") { seperatorFound = true; } } if (!seperatorFound) { value = value.replace(".", "NaN"); } return this.orgParaseFloat(value); }; 

I opened a ticket on their Github, so maybe this will be fixed.

Answer 7

after some research ... I found a solution.

Web.config in <system.web> add

 <globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/> 

Extend the HtmlHelper Class

 namespace System.Web.Mvc { public static class LocalizationHelper { public static IHtmlString MetaAcceptLanguage(this HtmlHelper html) { var acceptLang = HttpUtility.HtmlAttributeEncode(Thread.CurrentThread.CurrentUICulture.ToString()); return new HtmlString(string.Format("<meta name=\"accept-language\" content=\"{0}\"/>", acceptLang)); } } } 

_Layout.cshtml at the end of the <head> add

 @Html.MetaAcceptLanguage(); <script type="text/javascript"> $(document).ready(function () { var data = $("meta[name='accept-language']").attr("content"); $.global.preferCulture(data); }); </script> 

After these changes, I can manipulate decimal numbers using my web gui.

Regards, Giacomo

Answer 8

I am from argentina, and I have been struggling with this problem for a long time, we use "," as a decimal separator, if you write "comma", javascript check fails, but if you put ".", The model will take a number converted to an integer (55.60 will be 5560)

I solved this problem with this simple solution:

1st - I updated the jquery validation libraries using the new cdn addresses: http://jqueryvalidation.org/

The links that I included in my javascript are as follows:

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.js"></script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/additional-methods.min.js"></script> 

and if you want it to be in a specific language (in my case, Spanish), add this line as well:

 <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/localization/messages_es.js"></script> 

Replace ES with the language you want.

2nd - If you want the numeric keypad to be decimal, you must replace ".". with "," to work correctly, add this code to your page to do this automatically:

 $('#txtCurrency').keyup(function () { $('#txtCurrency').val($('#txtCurrency').val().replace(/\./g, ',')); }); 

---

Presto, the problem is resolved.

Bye

Answer 9

No plugins

I think the easiest way to get around this without a plugin is to simply override the default check, for example:

 <script type="text/javascript"> $.validator.methods.number = function (value, element) { var regex = /^(\d*)(\,\d{1,2})?$/; //99999,99 return regex.test(value); } </script> 

If you look at the source code of jquery.validate.js , you will see that it just checks the regular expression, like the code above, plus it checks if this element is optional: