1

I am trying to validate local decimal numbers (Portuguese -> pt-PT) but I get a console error in the Browser:

Uncaught TypeError: t.parseFloat is not a function.  Exception occurred when checking element SizeOpenedWidth, check the 'number' method.

In Portugal, the decimal separator is the ",", so a valid decimal number here is "10,21".

The script I use to load Globalization:

$.when(
        $.getJSON("/Scripts/cldr/supplemental/likelySubtags.json"),
        $.getJSON("/Scripts/cldr/main/numbers.json"),
        $.getJSON("/Scripts/cldr/main/ca-gregorian.json"),
        $.getJSON("/Scripts/cldr/supplemental/timeData.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("pt-PT");
    });

On the View I use unobtrusive validation:

<div class="form-group">
    @Html.LabelFor(model => model.SizeOpenedWidth, htmlAttributes: new { @class = "control-label col-md-3" })
    <div class="col-md-3">
        <div class="input-group">
            @Html.EditorFor(model => model.SizeOpenedWidth, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.SizeOpenedWidth, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

To load all the libraries, I use the Shared/Layout file:

<script src="/Scripts/jquery/jquery-2.1.4.js"></script>

<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/cldr/event.js"></script>
<script src="/Scripts/cldr/supplemental.js"></script>
<script src="/Scripts/cldr/unresolved.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/date.js"></script>

<script src="/Scripts/moment.min.js"></script>
<script src="/Scripts/moment-with-locales.min.js"></script>

<script src="/Scripts/bootstrap/bootstrap.js"></script>
<script src="/Scripts/respond/respond.js"></script>

<script src="/Scripts/jquery/jquery.validate.min.js"></script>
<script src="/Scripts/jquery/jquery.validate.globalize.min.js"></script>
<script src="/Scripts/jquery/jquery.validate.unobtrusive.min.js"></script>

<script src="/Scripts/bootstrap-datetimepicker.js"></script>
Patrick
  • 2,995
  • 14
  • 64
  • 125
  • 3
    Have you seen [this SO question](http://stackoverflow.com/questions/9204855/cant-get-the-jquery-globalization-to-work)? In the accepted answer it states that you need to put the globalize scripts after the validation ones (which your code doesn't). It also shows some other things that need to be done to make this work. Have you tried those steps? – Becuzz Jan 18 '16 at 15:46
  • Hi Thanks. I have tested it but it seems an old version because I get from the beginning the error "Uncaught TypeError: Globalize.addCultureInfo is not a function" on the lasted version of Globalize – Patrick Jan 19 '16 at 14:48
  • And where in your code is that error coming from? – Becuzz Jan 19 '16 at 15:09
  • From the globalize.cultures.pt-PT.js file I added to try the SO question you suggested – Patrick Jan 19 '16 at 15:31
  • @Becuzz I found the problem, please check my answer. – Patrick Jan 19 '16 at 16:15

1 Answers1

4

The problem was related with the jQuery Validation Globalize Library version.

I was using the version 1.0.1 that was still using the parseFloat method.

This method is not available anymore with Globalize v1.0.0, it has been replaced with the method Globalize.parseNumber.

After updating to version 1.1.0, everything started to work properly.

Patrick
  • 2,995
  • 14
  • 64
  • 125