Home MVC 3 jQuery Validation/globalizing of number/decimal field

# MVC 3 jQuery Validation/globalizing of number/decimal field

designvision.dk
1#
designvision.dk Published in 2011-03-04 22:07:08Z
 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 @using (Html.BeginForm()) { @Html.ValidationSummary(true)
Product
@Html.LabelFor(model => model.name)
@Html.EditorFor(model => model.name) @Html.ValidationMessageFor(model => model.name)
@Html.LabelFor(model => model.itemNo)
@Html.EditorFor(model => model.itemNo) @Html.ValidationMessageFor(model => model.itemNo)
@Html.LabelFor(model => model.price)
@Html.EditorFor(model => model.price) @Html.ValidationMessageFor(model => model.price)

}  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...
rgripper
2#
 You could try the jQuery Globalization plugin from Microsoft:   Plugin was renamed and moved, you should use Globalize (Mar 2012)   more about this on Scott Hanselman blog post
shatl
3#
 Updated script for current version of https://github.com/jquery/globalize with optional elements support $.validator.methods.number = function (value, element) { return this.optional(element) || !isNaN(Globalize.parseFloat(value)); }$(function () { Globalize.culture('%%culture%%'); }); 
Christopher
4#
 @shatl has the right answer as of today. Note for the range attribute you'll need a hack shown below. The complete code to add is shown below: @section Scripts { @Scripts.Render("~/bundles/jqueryval") } 
John Reilly
5#
John Reilly Reply to 2012-09-08 06:46:39Z
 I ended up following the advice in Scott Hanselman's blog on this topic - you can read about this 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 up in the following blog post in case that's helpful: http://icanmakethiswork.blogspot.co.uk/2012/09/globalize-and-jquery-validate.html
Johnny
6#
 Just for future reference, what worked for me was the following: Remember to set the proper jQuery version, and the correct culture, which in this example is danish. If there can be no periods in the value then uncomment the comment.  
Anders
7#
 Thanks for this page, saved me alot of trouble, I had to fix the globalize code how ever. Swedish culture does not accept dot as seperator, but since parseFloat uses the underlying javasacript parse dots will be accepcted as decimal seperator, but server side these will be rejected. To fix this i override the parseFloat like this 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've open a ticket at their Github so maybe this will be fixed
gsscoder
8#
 after some research... I found a solution. Web.config in  add   Extend 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("", acceptLang)); } } }  _Layout.cshtml at the end of  add @Html.MetaAcceptLanguage();  After these changes I'm able to manipulate decimal numbers with my web gui. Regards, Giacomo
Yogurtu
9#
 i'm from argentina, and i'm fighting with this problem a long time ago, we use "," as decimal separator, if you write "comma" javascript validation fails, but if you put ".", model will receibe a number translated to integer (55.60 will be 5560) I solved out this problem with this simply solution: 1st- I upgraded jquery validation librarys, using new cdn addresses from: http://jqueryvalidation.org/ the links that I included on my javascript are this:   and if you want it in a specific language (in my case Spanish) add this line too:   Replace ES with the language you want. 2nd- If you want to allow numeric keypad decimal, you must replace "." with "," to work properly, add this code to your page to do that automatically: $('#txtCurrency').keyup(function () {$('#txtCurrency').val($('#txtCurrency').val().replace(/\./g, ',')); });  Presto, problem solved. Bye. fabriciorissetto 10# fabriciorissetto Reply to 2016-05-06 01:11:39Z ## No plugins I think the easiest way to workaround this without any plugin is by just overriding the default validation, like this: <script type="text/javascript">$.validator.methods.number = function (value, element) {

If you look at the source code of jquery.validate.js you will see that it just tests a regex like the code above, plus it validates if the element is optional: