wtorek, 28 grudnia 2010

Globalizing ASP.NET MVC unobtrusive validation

If you want to globalize unobtrusive jQuery valdiation in your ASP.NET MVC3 the post by Phil Haack won't do the job for you. Still it's quite simple to do.

First of all you'll need to download jquery-glob and place globalization.js and Globalization.xx-XX.js in your Scripts folder. Then you need to include them after regular validation scripts. Below is an example of how it should look:

<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript">
</script>
<script src="/Scripts/jquery.validate.min.js" type="text/javascript">
</script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript">
</script>
<script src="/Scripts/globalization/globalization.js" type="text/javascript">
</script>
<script src="/Scripts/globalization/Globalization.pl-PL.js" type="text/javascript">
</script>

In my case the globalization script is: Globalization.pl-PL.js since that's the locale of my customer and his web application.

After that if you want the validator to format the numbers correctly you'll need to add the following code to 'tell' the validator what function to use when validating number format:

<script type="text/javascript">
    $.validator.methods.number = function (value, element) {
        if (Globalization.parseFloat(value)) {
            return true;
        }
        return false;
    }
    $(document).ready(function () {
        $.culture = jQuery.cultures['pl-PL'];
        $.preferCulture($.culture.name);
        Globalization.preferCulture($.culture.name);
    });
</script>

Now your validation client will pass when you input number like 12,90 (PL) instead of 12.90 (EN).

I noticed that you can't use the jQuery version of the Globalization plugin. There's a naming conflict between jQuery.validate.format and jQuery.glob.format.

16 komentarzy:

  1. There is no globalization.js file in the download..

    OdpowiedzUsuń
  2. I'm sorry the non-jquery globalization.js is another page since it's not official jQuery: https://github.com/nje/jquery-glob

    OdpowiedzUsuń
  3. Tell me how you solved the problem with the date type?

    thanks

    OdpowiedzUsuń
  4. What problem with date type are you talking about? Can you describe your problem in more detail?

    OdpowiedzUsuń
  5. In ASP.NET-MVC3 with my localization date format is 'dd.MM.yyyy'. jQuery validation does not pass validation when writing data with my format into textbox

    OdpowiedzUsuń
  6. You need to follow the same rule as with number validation, just use Globalization.parseDate() instead of parseFloat(). It should return null when the date is not parsed (see line 253 of globalization.js) so no other changes should be required.

    OdpowiedzUsuń
  7. Hi,

    Do you know how do get this to work with the range validator?

    //Daniel

    OdpowiedzUsuń
  8. Hi,

    To solve the range validator problem you simply need to provide an override method for the range validation method as well, something like this would solve the problem :

    jQuery.extend(jQuery.validator.methods, {
    range: function (value, element, param) {
    //Use the Globalization plugin to parse the value
    var val = $.parseFloat(value);
    return this.optional(element) || (val >= param[0] && val <= param[1]);
    }
    });

    Kostas

    OdpowiedzUsuń
  9. There is no globalization.js file neither at https://github.com/nje/jquery-glob nor at https://github.com/jquery/jquery-global

    OdpowiedzUsuń
  10. That's a recent change because jQuery Glob is now an official jQuery plugin. Maybe the problem was solved in the final release. I will test it in my application and will let you know bu I need a branch for this because globalization plays a crucial role in my app. Also there's an issue for this on github: https://github.com/jquery/jquery-global/issues/16

    OdpowiedzUsuń
  11. Hi.

    I have a question about date format as was said before. There is some troubleshoot to globalize date input. I have app where user input date in format 'dd.MM.yy' - it`s russian globalization in MVC3 site.

    So, when user click on submit button, raise client validation and said thta 16.04.2011 - not valid date, only if i change it to 12.04.2011 - it pass date(((.

    How i can fix this problem ?

    THanks for help.

    OdpowiedzUsuń
  12. Globalization.pl-PL.js ends with
    (Globalization);
    and I get an error from browser when that is read.

    * Globalization is not defined *

    What can it be?

    OdpowiedzUsuń
  13. El Cirro i have the same problem ((
    But, unfortunately, i still can`t resolve it

    OdpowiedzUsuń
  14. Hey, I've been trying for a while all you explained but I'm still getting this error: Cannot read property 'pl-PL' of undefined. This happens on this line: $.culture = jQuery.cultures['pl-PL'];

    OdpowiedzUsuń
  15. I've tried to implement something like this, but my problem is that the Globalization.parseFloat(value) always allows . as decimal separator. I'm using sv-SE, and need a , as decimal separator, becasue when a decimal number with . as separator is posted, the MVC model mapping doesn't understand and the number in the model is 0.
    Any suggestions?

    OdpowiedzUsuń