MVC Jquery globalization - validating a decimal

StackOverflow https://stackoverflow.com/questions/19636339

Question

I am struggling to validate a decimal field using globalization.

I need my value to be in french format (with coma as decimal separator and no thousand separator).

EDIT : updated following This great solution

So, here is my model :

public class CompanyTaxHistoryModel
{
    [Required]
    public DateTime DateFrom { get; set; }

    [Required]
    public DateTime DateTo { get; set; }

    [Required]
    [Range(0, 100, ErrorMessage = "The percentage must be between 0 and 100")]
    [DisplayFormat(DataFormatString = "{0:N} %")]
    [Display(Name = "Company Tax")]
    public decimal CompanyTaxPercent { get; set; }

}

here is my web.config :

<globalization requestEncoding="UTF-8" responseEncoding="UTF-8" culture="auto" uiCulture="auto" />

I have added a "localizationHelper" as follows :

namespace xxxx.Helpers
{
    public static class LocalizationHelpers
    {
        public static IHtmlString MetaAcceptLanguage<t>(this HtmlHelper<t> html)
        {
            var acceptLanguage = HttpUtility.HtmlAttributeEncode(System.Threading.Thread.CurrentThread.CurrentUICulture.ToString());
            return new HtmlString(String.Format("<meta name=\"accept-language\" content=\" {0}\">",acceptLanguage));

        }
    }
}

Wich i use in my _Layout.cshtml :

@using xxxx.Helpers
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    @Html.MetaAcceptLanguage()

I have added the Globalize.js + the needed cultures to my project and added the below to my scripts :

$(document).ready(function () {
    var data = $("meta[name='accept-language']").attr("content")
    Globalize.culture(data);
});

$.validator.methods.date = function (value, element) {
    return Globalize.parseDate(value);
};

$.validator.methods.range = function (value, element, param) {
    return this.optional(element) || (Globalize.parseFloat(value) >= param[0] && Globalize.parseFloat(value) <= param[1]);
}

$.validator.methods.number = function (value, element) {
    return !isNaN(Globalize.parseFloat(value));
}

Everything seems to be working just fine but I have a problem with the decimal values as the "." button of any keyboard should render the appropriated value (either a "." or a "," according to the local culture).

For example, my browser is set to fr-FR and if I type "12,5" using the numeric pad only, I get "12.5" and therefore I get a validation error.

In such case the "." button of the numeric pad shall be understood as a coma.

any ideas, what am I missing ?

Was it helpful?

Solution

So,

for the globalization issue, the solution was here and reflected in the edit of my question (so far seems to work perfectly).

as for the point/comma issue here is what i did 

function validateFrNumber(e) {

        theCulture = Globalize.cultureSelector;
        foundFR = theCulture.indexOf("FR")
        foundfr = theCulture.indexOf("fr")

        if (foundFR != '-1' || foundfr != '-1') {
            theValeur = $(e).find("input").val();
            foundDot = theValeur.indexOf(".");

            if (foundDot > -1) {
                $(e).find("input").attr('value', theValeur.replace(".", ","));
            }
        }

}

and then call this in the input onkeyup:

<div class="input" onkeyup="validateFrNumber(this)">@Html.EditorFor(model => model.MydecimalValue)</div>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top