CODEWITHSUNDEEP
jqueryvalidationasp.net-mvc-3globalizationculture
designvision.dk
designvision.dk

Reputation: 783

MVC 3 jQuery Validation/globalizing of number/decimal field

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...

Upvotes: 66

Views: 51227

Answers (9)

fabriciorissetto
fabriciorissetto

Reputation: 10083

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:

enter image description here

Upvotes: 0

Yogurtu
Yogurtu

Reputation: 3051

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.

Upvotes: 0

RickAndMSFT
RickAndMSFT

Reputation: 22840

@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>
}

Upvotes: 14

Johnny
Johnny

Reputation: 795

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>

Upvotes: 1

John Reilly
John Reilly

Reputation: 6309

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

Upvotes: 1

gsscoder
gsscoder

Reputation: 3402

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

Upvotes: 0

Darin Dimitrov
Darin Dimitrov

Reputation: 1039428

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

Upvotes: 57

Anders
Anders

Reputation: 17564

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

Upvotes: 0

shatl
shatl

Reputation: 910

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%%');
});

Upvotes: 23

Related Questions