Can't get the jquery globalization to work
I try to use the jQuery Globalization plugin in order to fix the comma problem with jquery unobstructive client validation. However I tried many many solutions and there no good solution to fix this. I am on a non-English localization computer and this is important that my customers enter a decimal value like "123,66" and not "123.66". ASP.NET validation tell me that the price must be a number! meh ? are you serious ? lol
I am getting this javascript error when I try to do the fix.
$.global is undefined
Here my code.
Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script>
<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/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/glob.fix.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
glob.fix.js
$.validator.methods.range = function (value, element, param) {
var globalizedValue = value.replace(",", ".");
return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
}
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
}
I can't understand.. it should work since I added ~/Scripts/globalize.js.
Any idea? or you might have a better solution for having client validation work and lets me enter comma as decimal values?
Answer
I found the way to finally get rid of the decimal problem with comma seperator!
Here a picture of the result! No more validation problems.
The steps to the fix.
1- Get the Globalization library for jQuery
You must get the latest script! Also I found some answers out there that was outdated.
The object to call the library is no more $.global or anything like that but Globalize.
2- Include the scripts in your project. You must add them after jquery.validation stuff.
<script src="@Url.Content("~/Scripts/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
3- Replace some methods of the validator. This will override the methods for 'number' and 'range' validation which was causing problems.
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
Globalize.parseFloat => This will actually replace anything that contains ',' to '.' if you selected a culture that require it.
After this.. You must add. This will make the globalize functions to work with the culture.
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
The complete code look like...
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.7.1.js")" type="text/javascript"></script>
<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/globalize.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/cultures/globalize.cultures.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.form.js")"type="text/javascript"></script>
<script type="text/javascript">
$.validator.methods.number = function (value, element) {
return this.optional(element) || !isNaN(Globalize.parseFloat(value));
}
$.validator.methods.range = function (value, element, param) {
return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}
$(document).ready(function () {
Globalize.culture('fr-CA');
// Only there to show which culture are being used.
console.log(Globalize.culture().name);
});
</script>
</head>
<body>
@RenderBody()
</body>
</html>