MVC 3 jQuery Validation/globalizing of number/decimal field
JqueryValidationasp.net Mvc-3GlobalizationCultureJquery Problem Overview
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...
Jquery Solutions
Solution 1 - Jquery
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
Solution 2 - Jquery
Updated script for current version of [https://github.com/jquery/globalize][1] with optional elements support
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$(function () {
Globalize.culture('%%culture%%');
});
[1]: https://github.com/jquery/globalize "jquery-global"
Solution 3 - Jquery
@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")
<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>
}
Solution 4 - Jquery
I ended up following the advice in Scott Hanselman's blog on this topic - you can read about this here:
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
Solution 5 - Jquery
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.
<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>
Solution 6 - Jquery
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
Solution 7 - Jquery
after some research... I found a solution.
Web.config
in <system.web> add
<globalization culture="auto" uiCulture="auto" enableClientBasedCulture="true"/>
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("<meta name=\"accept-language\" content=\"{0}\"/>", acceptLang));
}
}
}
_Layout.cshtml
at the end of <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'm able to manipulate decimal numbers with my web gui.
Regards, Giacomo
Solution 8 - Jquery
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:
<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 in a specific language (in my case Spanish) add this line too:
<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 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.
Solution 9 - Jquery
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) {
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 tests a regex like the code above, plus it validates if the element is optional:
