-
Notifications
You must be signed in to change notification settings - Fork 25.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Show support jQuery validation for non-English locales that use a comma (",") for a decimal point #4076
Comments
@damienbod @Bartmax @hishamco would one of you be able to help out with this? (or recommend someone)? |
@ryanbrandenburg @danroth27 this is a frequent complaint of customers. Can I get some help on showing how to do this? |
On @System.Globalization.CultureInfo.CurrentUICulture Refreshing the page you should see To enable another locale than default on mvc you need to add localization support (read Globalization and localization in ASP.NET Core) For this sample, let's just add es-UY locale and set as the default. on var defaultCulture = new CultureInfo("es-UY");
var localizationOptions = new RequestLocalizationOptions
{
DefaultRequestCulture = new RequestCulture(defaultCulture),
SupportedCultures = new List<CultureInfo> { defaultCulture },
SupportedUICultures = new List<CultureInfo> { defaultCulture }
};
app.UseRequestLocalization(localizationOptions); this will add support for locale "es-UY" and also make it the default culture. refreshing the Index page on your browser should now show es-UY as the current UI locale. At this point, using decimal points on the client as 19.50 will allow the jQuery validation but on the server it won't be seen as decimals so you will end with 1.950,00 value. Then you need to use Globalize with jquery-validation-globalize plugin. You can find here Globalize installation instructions and jquery-validation-globalize installation instructions. Unfortunately those are for bower and the ASP.NET CORE team moved away (a good thing) from bower so if you want to use the recommended NPM way, you can still do it. Either way, I highly recommend you check out both projects for documentation and more info. After you managed to install Globalize and jquery-validation-globalize plugin then you need to use it on your html pages. on <!-- cldr scripts (needed for globalize) -->
<script src="~/lib/cldrjs/dist/cldr.js"></script>
<script src="~/lib/cldrjs/dist/cldr/event.js"></script>
<script src="~/lib/cldrjs/dist/cldr/supplemental.js"></script>
<!-- globalize scripts -->
<script src="~/lib/globalize/dist/globalize.js"></script>
<script src="~/lib/globalize/dist/globalize/number.js"></script>
<script src="~/lib/globalize/dist/globalize/date.js"></script>
<script src="~/lib/jquery-validation-globalize/jquery.validate.globalize.js"></script> Refresh your page, it should work with the current culture (in this case, es-UY). [Edit, moved from top to here]Some notes:
The regular expression is not doing what's described, more notably it requires first letter to be Uppercase. |
and don't think you need it, but just in case I made the sample project available on my github at https://github.com/Bartmax/MvcMovie.LocalizationSample (let me know when I can delete it) |
Thanks @Bartmax |
@Bartmax I have this error in js, during validation, not you?
|
I would really like to let both comma and dot to be accepted as a decimal separator. In Russia and i guess in some other places it is ok to use either dot or comma to separate decimal values, but for the thousands people tend to use spaces, like that: 125 000 000.25 Also, i just cloned repository that @Bartmax provided, it does accept comma as a separator so when i input "1,99" i get "$ 1,99", but when i type in "1.99" i get the movie with the price of "$ 199,00". It doesn't seem like an appropriate behavior. |
@coykto-repos is not the case of configure the model with attribute that indicate it is a currency data type? On the other hand, perhaps, you may be using a culture that needs a comma to decimal separator. |
@Calkines maybe i'm missing something as i'm not familiar with asp.net core, or .net in general for that matter. I originaly came here because i got really confused by "getting started" tutorial, writen by @Rick-Anderson and others, as neither "." nor "," passed validation for a price field. I have a Django background and i never had problems like that as the framework seems to handled these things well, but here it seems messing with jQuery validation probably would not be enough. As i mentioned, typing in values "1.99" and "1,99" should give me the same result - "$ 1.99" regardless of what culture my browser says it uses, definately not "$ 199". So, this is also server-side (or asp.net-side) problem as far as i understand it, since one of the solutions i found is to write custom IModelBinder (which is far from "getting started"). |
#4382 adds link to this issue until I have time to add this info to the doc. |
This happened after I updated the file .bowercc file: bower ECMDERR Failed to execute "node ./node_modules/cldr-data-downloader/bin/download.js -i bower_components/cldr-data/index.json -o bower_components/cldr-data/", exit code of #1 Additional error details: |
please say where I can found this file ".bowercc" |
I found 16 bower.json files in my Project but no .bowercc. After installing jquery-validation-globalize there is a new hidden dir 'bower_components' where i find cldrjs, jquery-validation-globalize and some others. |
@JoaoVictorCardoso bower.cc is "inside" bower.json |
Sorry, no bower.json in my project root. I just created two new Project (ASP.NET Core-Webanwendung / MVC / Core 2.0). Added jquery-validation-globalize thru Nuget in one Project, thru bower in the other. |
@Peter578 bower is about to be discontinued in asp.netcore 2.0. Maybe because of that you can't see the bower.cc file in your project. This thread was to support .net core 1.x (I think) |
Can you update this? |
@Rick-Anderson update how? |
@Bartmax I'm getting lots of comments - now that we don't use bower this doesn't work. |
@Rick-Anderson the authors of both plugins document Let me know if the current update works for you. |
Hello!
{
"directory": "wwwroot/lib",
"scripts": {
"preinstall": "npm install [email protected]",
"postinstall": "node ./node_modules/cldr-data-downloader/bin/download.js -i wwwroot/lib/cldr-data/index.json -o wwwroot/lib/cldr-data/"
}
}
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.7",
"jquery": "3.2.1",
"jquery-validation": "1.17.0",
"jquery-validation-unobtrusive": "3.2.6",
"cldr-data": "29.0.0",
"globalize": "v0.1.1",
"jquery-validation-globalize": "1.0.0",
"cldrjs": "0.5.0"
},
"resolutions": {
"globalize": "^1.0.0",
"jquery": "3.2.1",
"cldrjs": "0.5.0",
"jquery-validation": "1.17.0"
}
}
<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
<!-- cldr scripts (needed for globalize) -->
<script src="~/lib/cldrjs/dist/cldr.js"></script>
<script src="~/lib/cldrjs/dist/cldr/event.js"></script>
<script src="~/lib/cldrjs/dist/cldr/supplemental.js"></script>
<!-- globalize scripts -->
<script src="~/lib/globalize/dist/globalize.js"></script>
<script src="~/lib/globalize/dist/globalize/number.js"></script>
<script src="~/lib/globalize/dist/globalize/date.js"></script>
<script src="~/lib/jquery-validation-globalize/jquery.validate.globalize.js"></script>
@inject Microsoft.AspNetCore.Hosting.IHostingEnvironment HostingEnvironment
@{
string GetDefaultLocale() {
const string localePattern = "lib\\cldr-data\\main\\{0}";
var currentCulture = System.Globalization.CultureInfo.CurrentCulture;
var cultureToUse = "ru-RU"; //Default regionalisation to use
if (System.IO.Directory.Exists(System.IO.Path.Combine(HostingEnvironment.WebRootPath, string.Format(localePattern, currentCulture.Name))))
cultureToUse = currentCulture.Name;
else if (System.IO.Directory.Exists(System.IO.Path.Combine(HostingEnvironment.WebRootPath, string.Format(localePattern, currentCulture.TwoLetterISOLanguageName))))
cultureToUse = currentCulture.TwoLetterISOLanguageName;
return cultureToUse;
}
}
<script type="text/javascript">
var culture = "@GetDefaultLocale()";
$.when(
$.get("/lib/cldr-data/supplemental/likelySubtags.json"),
$.get("/lib/cldr-data/main/" + culture + "/numbers.json"),
$.get("/lib/cldr-data/supplemental/numberingSystems.json"),
$.get("/lib/cldr-data/main/" + culture + "/ca-gregorian.json"),
$.get("/lib/cldr-data/main/" + culture +"/timeZoneNames.json"),
$.get("/lib/cldr-data/supplemental/timeData.json"),
$.get("/lib/cldr-data/supplemental/weekData.json")
).then(function () {
// Normalize $.get results, we only need the JSON, not the request statuses.
return [].slice.apply(arguments, [0]).map(function (result) {
return result[0];
});
}).then(Globalize.load).then(function () {
Globalize.locale(culture);
});
</script> This solution from article by Stefan Vincent Haug. Why does the official documentation refer to an answer that does not solve the problem? |
@Bartmax I copied your instructions to the top of the issue to resolve some problems people had with the comment we don't use bower. I also fixed a couple problems you mentioned with the tutorial (changes will show up in a couple days) and removed those comments. Can you review my edits? Is there anything we could do to make the instructions easier to follow? |
This must be a tutorial for beginners, but steps that are written here are more than complicated. I have not a single idea what you need to do. |
The steps to get globalization to work as suggested here, does not seem to work in Visual Studio 2022. |
Hey guys, how are you all? If you're getting hard time to solve this globalize install problem, there is how I've solved it to follow properly Razor Pages tutorial.
<!-- cldr script (needed for globalize) -->
<script src="~/lib/cldrjs/cldr.js"></script>
<!-- globalize script -->
<script src="~/lib/globalize/globalize.js"></script>
<!-- jquery validation script with globalize -->
<script src="~/lib/jquery-validation-globalize/jquery.validate.globalize.js"></script>
app.UseRequestLocalization("YOUR_LOCALIZATION"); Change Btw, thank you Rick-Anderson! Much appreciated your help at this matter, it was driving me crazy. |
Hi, Even as an experienced developer in many technologies (but not so much modern ASP.NET Core yet - that's why I wanted to follow this tutorial), I experience some issues. First we have the point that the docs are really a bit messy (for example: things of general relevance only being visible under the "Visual Studio Code" tab) and also really a bit outdated (for example: Part 2 talks about many problems and warnings with null check errors which are all solved issues in the current version). But let's talk about the specific issue with Globalization/Localization here, because I am trying to get things working as well.
|
my VS Code About page:
then following the rest as described by @rafaelrpd at Here |
@Rick-Anderson does it make sense to write the instructions provided here by @rafaelrpd in the body of the https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation page? |
@damienbod @Bartmax @hishamco would one of you be able to review the instructions provided here by @rafaelrpd |
@mkArtakMSFT can you have someone review the instructions provided here by @rafaelrpd |
<script src="~/lib/globalize/globalize.js"></script> @rafaelrpd @Rick-Anderson could you please let me know what this script is doing? This is the first time I see it BTW this is one of the oldest issues in localizations, it mainly related to jQuery if I'm not wrong |
LGTM maybe an integrity check is needed if including the js file from a CDN |
I remember the instructions provided by @rafaelrpd for using globalize.js is quite similar to the instructions in the old Getting Started with ASP.NET MVC 4/5 pages at here and here from 2013/2014. The globalize.js GitHub project's page is https://github.com/globalizejs/globalize and it’s also available from npm and bower. It’s a very popular project on GitHub btw. |
We need to check .. |
@Rick-Anderson @hishamco it also solves #8585 |
Franlky I didn't try before, also never heard about it :) @Rick-Anderson again I see the issue related to jQuery, the question is what's the issue from localization APIs? |
The solution from @rafaelrpd works fine, but the problem is, it only works for server-side validations, the client-side stopped working. Is there any solution to this? |
@garbiru Did you find a solution? |
I may have read over it. But what's the solution now? And where i can find better tutorials for asp.net than on learn.microsoft? |
Folowing code worked in VS 2017 ASP.NET application Framework 4.5 using Microsoft.AspNet.Localization;
#if NET451
How to make this work in ASP.NET core 7.0 in VS 2022? |
TUVE EL MISMO PROBLEMA Y LO SOLUCIONE EN 2 PASOS! Gracias a ChatGPT
Y listo funcionando! al 100% pones volver a cargar el proyecto f5 y puedes poner decimales ejemplo: 5,60 |
Thanks. Got it.
Cheers,
Eddy
Van: christian0712 ***@***.***>
Verzonden: maandag 31 juli 2023 19:38
Aan: dotnet/AspNetCore.Docs ***@***.***>
CC: onetoucheddy ***@***.***>; Comment ***@***.***>
Onderwerp: Re: [dotnet/AspNetCore.Docs] Show support jQuery validation for non-English locales that use a comma (",") for a decimal point (#4076)
TUVE EL MISMO PROBLEMA Y LO SOLUCIONE EN 2 PASOS! Gracias a ChatGPT
1. Solo agregas en wwroot/js/validation.js (este archivo y dentro escribes)
$.validator.methods.number = function (value, element) {
return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:.\d{3})+)(?:,\d+)?$/.test(value);
};
2. Cargas este archivo en Pages/Shared/_ValidationScriptsPartial.cshtml
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> <script src="/js/validation.js"></script>
Y listo funcionando! al 100% pones volver a cargar el proyecto f5 y puedes poner decimales ejemplo: 5,60
—
Reply to this email directly, view it on GitHub <#4076 (comment)> , or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZ47GVMNAEGVG5D53MCML6LXS7UPXANCNFSM4DYAI62A> .
You are receiving this because you commented.Message ID: ***@***.***>
|
Now you can add jQuery.Validation.Globalize package directly from NuGet package manager form Visual Studio 2022 IDE. There after click! 'Browse' Search for Globalize currency. You'll find Globalize Currency (Latest stable 1.1.0). Click! Install.... After that check the uncheck box of your ASP.NET core project, click! apply. |
I've tried everything suggested here and it's still not possible to enter 8,99 as a price with fr-FR locale |
https://docs.microsoft.com/en-us/aspnet/core/tutorials/first-mvc-app/validation mentions
You may not be able to enter decimal points or commas in the Price field. To support jQuery validation for non-English locales that use a comma (",") for a decimal point, and non US-English date formats, you must take steps to globalize your app.
Need tutorial that shows how to do this. Until the tutorial is written, follow these instructions:
On
Index.cshtml
addRefreshing the page you should see
en-US
displayed at the very top.This will help to see if you does have localization enabled on mvc. When localization is working it can be removed.
To enable another locale than default on mvc you need to add localization support (read Globalization and localization in ASP.NET Core)
For this sample, let's just add es-UY locale and set as the default.
on
Startup.cs
:this will add support for locale "es-UY" and also make it the default culture.
refreshing the Index page on your browser should now show es-UY as the current UI locale.
At this point, using decimal points on the client as 19.50 will allow the jQuery validation but on the server it won't be seen as decimals so you will end with 1.950,00 value.
Then you need to use Globalize with jquery-validation-globalize plugin.
See Globalize installation instructions and jquery-validation-globalize installation instructions. Unfortunately those instructions use bower for the installation and the ASP.NET CORE 2.0 and late doesn't use bower. If you want to use the recommended NPM way, you can still do it. Either way, I highly recommend you check out both projects for documentation and more info. You just need to install Globalize with jquery-validation-globalize plugin - how you do it is secondary.
After you managed to install Globalize and jquery-validation-globalize plugin then you need to use it on your html pages.
on
_ValidationScriptsPartial.cshtml
add the new required javascript files (after jQuery):Refresh your page, it should work with the current culture (in this case, es-UY).
The LibMan tool requires VS 15.8.0 Preview 2.0 or later.
Hope it helps.

The text was updated successfully, but these errors were encountered: