Created
October 7, 2015 08:36
-
-
Save johnnyreilly/e97b97afa5217e4065a9 to your computer and use it in GitHub Desktop.
Demo of quirky Globalize for @rxaviers https://github.com/jquery/globalize/issues/513
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<!-- saved from url=(0094)http://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/AdvancedDemo/Globalize.html --> | |
<html lang="en" class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Globalize - jQuery Validation Unobtrusive Native</title> | |
<link href="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Content/site.css" rel="stylesheet"> | |
<body> | |
<form method="post" novalidate="novalidate"> <div class="row"> | |
<label for="localeSelector">Current locale:</label> | |
<select id="localeSelector" aria-invalid="false" class="valid"> | |
<option>af</option> | |
<option>af-NA</option> | |
<option>am</option> | |
<option>ar</option> | |
<option>ar-AE</option> | |
<option>ar-BH</option> | |
<option>ar-DJ</option> | |
<option>ar-DZ</option> | |
<option>ar-EG</option> | |
<option>ar-EH</option> | |
<option>ar-ER</option> | |
<option>ar-IL</option> | |
<option>ar-IQ</option> | |
<option>ar-JO</option> | |
<option>ar-KM</option> | |
<option>ar-KW</option> | |
<option>ar-LB</option> | |
<option>ar-LY</option> | |
<option>ar-MA</option> | |
<option>ar-MR</option> | |
<option>ar-OM</option> | |
<option>ar-PS</option> | |
<option>ar-QA</option> | |
<option>ar-SA</option> | |
<option>ar-SD</option> | |
<option>ar-SO</option> | |
<option>ar-SS</option> | |
<option>ar-SY</option> | |
<option>ar-TD</option> | |
<option>ar-TN</option> | |
<option>ar-YE</option> | |
<option>az</option> | |
<option>az-Latn</option> | |
<option>be</option> | |
<option>bg</option> | |
<option>bn</option> | |
<option>bn-IN</option> | |
<option>bs</option> | |
<option>bs-Latn</option> | |
<option>ca</option> | |
<option>ca-AD</option> | |
<option>ca-ES-VALENCIA</option> | |
<option>ca-FR</option> | |
<option>ca-IT</option> | |
<option>cs</option> | |
<option>cy</option> | |
<option>da</option> | |
<option>da-GL</option> | |
<option>de</option> | |
<option>de-AT</option> | |
<option>de-BE</option> | |
<option>de-CH</option> | |
<option>de-LI</option> | |
<option>de-LU</option> | |
<option>el</option> | |
<option>el-CY</option> | |
<option selected="selected">en</option> | |
<option>en-001</option> | |
<option>en-150</option> | |
<option>en-AG</option> | |
<option>en-AI</option> | |
<option>en-AS</option> | |
<option>en-AT</option> | |
<option>en-AU</option> | |
<option>en-BB</option> | |
<option>en-BE</option> | |
<option>en-BI</option> | |
<option>en-BM</option> | |
<option>en-BS</option> | |
<option>en-BW</option> | |
<option>en-BZ</option> | |
<option>en-CA</option> | |
<option>en-CC</option> | |
<option>en-CH</option> | |
<option>en-CK</option> | |
<option>en-CM</option> | |
<option>en-CX</option> | |
<option>en-CY</option> | |
<option>en-DE</option> | |
<option>en-DG</option> | |
<option>en-DK</option> | |
<option>en-DM</option> | |
<option>en-ER</option> | |
<option>en-FI</option> | |
<option>en-FJ</option> | |
<option>en-FK</option> | |
<option>en-FM</option> | |
<option>en-GB</option> | |
<option>en-GD</option> | |
<option>en-GG</option> | |
<option>en-GH</option> | |
<option>en-GI</option> | |
<option>en-GM</option> | |
<option>en-GU</option> | |
<option>en-GY</option> | |
<option>en-HK</option> | |
<option>en-IE</option> | |
<option>en-IL</option> | |
<option>en-IM</option> | |
<option>en-IN</option> | |
<option>en-IO</option> | |
<option>en-JE</option> | |
<option>en-JM</option> | |
<option>en-KE</option> | |
<option>en-KI</option> | |
<option>en-KN</option> | |
<option>en-KY</option> | |
<option>en-LC</option> | |
<option>en-LR</option> | |
<option>en-LS</option> | |
<option>en-MG</option> | |
<option>en-MH</option> | |
<option>en-MO</option> | |
<option>en-MP</option> | |
<option>en-MS</option> | |
<option>en-MT</option> | |
<option>en-MU</option> | |
<option>en-MW</option> | |
<option>en-MY</option> | |
<option>en-NA</option> | |
<option>en-NF</option> | |
<option>en-NG</option> | |
<option>en-NL</option> | |
<option>en-NR</option> | |
<option>en-NU</option> | |
<option>en-NZ</option> | |
<option>en-PG</option> | |
<option>en-PH</option> | |
<option>en-PK</option> | |
<option>en-PN</option> | |
<option>en-PR</option> | |
<option>en-PW</option> | |
<option>en-RW</option> | |
<option>en-SB</option> | |
<option>en-SC</option> | |
<option>en-SD</option> | |
<option>en-SE</option> | |
<option>en-SG</option> | |
<option>en-SH</option> | |
<option>en-SI</option> | |
<option>en-SL</option> | |
<option>en-SS</option> | |
<option>en-SX</option> | |
<option>en-SZ</option> | |
<option>en-TC</option> | |
<option>en-TK</option> | |
<option>en-TO</option> | |
<option>en-TT</option> | |
<option>en-TV</option> | |
<option>en-TZ</option> | |
<option>en-UG</option> | |
<option>en-UM</option> | |
<option>en-US-POSIX</option> | |
<option>en-VC</option> | |
<option>en-VG</option> | |
<option>en-VI</option> | |
<option>en-VU</option> | |
<option>en-WS</option> | |
<option>en-ZA</option> | |
<option>en-ZM</option> | |
<option>en-ZW</option> | |
<option>es</option> | |
<option>es-419</option> | |
<option>es-AR</option> | |
<option>es-BO</option> | |
<option>es-CL</option> | |
<option>es-CO</option> | |
<option>es-CR</option> | |
<option>es-CU</option> | |
<option>es-DO</option> | |
<option>es-EA</option> | |
<option>es-EC</option> | |
<option>es-GQ</option> | |
<option>es-GT</option> | |
<option>es-HN</option> | |
<option>es-IC</option> | |
<option>es-MX</option> | |
<option>es-NI</option> | |
<option>es-PA</option> | |
<option>es-PE</option> | |
<option>es-PH</option> | |
<option>es-PR</option> | |
<option>es-PY</option> | |
<option>es-SV</option> | |
<option>es-US</option> | |
<option>es-UY</option> | |
<option>es-VE</option> | |
<option>et</option> | |
<option>eu</option> | |
<option>fa</option> | |
<option>fa-AF</option> | |
<option>fi</option> | |
<option>fil</option> | |
<option>fo</option> | |
<option>fo-DK</option> | |
<option>fr</option> | |
<option>fr-BE</option> | |
<option>fr-BF</option> | |
<option>fr-BI</option> | |
<option>fr-BJ</option> | |
<option>fr-BL</option> | |
<option>fr-CA</option> | |
<option>fr-CD</option> | |
<option>fr-CF</option> | |
<option>fr-CG</option> | |
<option>fr-CH</option> | |
<option>fr-CI</option> | |
<option>fr-CM</option> | |
<option>fr-DJ</option> | |
<option>fr-DZ</option> | |
<option>fr-GA</option> | |
<option>fr-GF</option> | |
<option>fr-GN</option> | |
<option>fr-GP</option> | |
<option>fr-GQ</option> | |
<option>fr-HT</option> | |
<option>fr-KM</option> | |
<option>fr-LU</option> | |
<option>fr-MA</option> | |
<option>fr-MC</option> | |
<option>fr-MF</option> | |
<option>fr-MG</option> | |
<option>fr-ML</option> | |
<option>fr-MQ</option> | |
<option>fr-MR</option> | |
<option>fr-MU</option> | |
<option>fr-NC</option> | |
<option>fr-NE</option> | |
<option>fr-PF</option> | |
<option>fr-PM</option> | |
<option>fr-RE</option> | |
<option>fr-RW</option> | |
<option>fr-SC</option> | |
<option>fr-SN</option> | |
<option>fr-SY</option> | |
<option>fr-TD</option> | |
<option>fr-TG</option> | |
<option>fr-TN</option> | |
<option>fr-VU</option> | |
<option>fr-WF</option> | |
<option>fr-YT</option> | |
<option>ga</option> | |
<option>gl</option> | |
<option>gu</option> | |
<option>he</option> | |
<option>hi</option> | |
<option>hr</option> | |
<option>hr-BA</option> | |
<option>hu</option> | |
<option>hy</option> | |
<option>id</option> | |
<option>is</option> | |
<option>it</option> | |
<option>it-CH</option> | |
<option>it-SM</option> | |
<option>ja</option> | |
<option>ka</option> | |
<option>kk</option> | |
<option>km</option> | |
<option>kn</option> | |
<option>ko</option> | |
<option>ko-KP</option> | |
<option>ky</option> | |
<option>lo</option> | |
<option>lt</option> | |
<option>lv</option> | |
<option>mk</option> | |
<option>ml</option> | |
<option>mn</option> | |
<option>mr</option> | |
<option>ms</option> | |
<option>ms-BN</option> | |
<option>ms-SG</option> | |
<option>my</option> | |
<option>nb</option> | |
<option>nb-SJ</option> | |
<option>ne</option> | |
<option>ne-IN</option> | |
<option>nl</option> | |
<option>nl-AW</option> | |
<option>nl-BE</option> | |
<option>nl-BQ</option> | |
<option>nl-CW</option> | |
<option>nl-SR</option> | |
<option>nl-SX</option> | |
<option>pa</option> | |
<option>pa-Guru</option> | |
<option>pl</option> | |
<option>pt</option> | |
<option>pt-AO</option> | |
<option>pt-CV</option> | |
<option>pt-GW</option> | |
<option>pt-MO</option> | |
<option>pt-MZ</option> | |
<option>pt-PT</option> | |
<option>pt-ST</option> | |
<option>pt-TL</option> | |
<option>ro</option> | |
<option>ro-MD</option> | |
<option>root</option> | |
<option>ru</option> | |
<option>ru-BY</option> | |
<option>ru-KG</option> | |
<option>ru-KZ</option> | |
<option>ru-MD</option> | |
<option>ru-UA</option> | |
<option>si</option> | |
<option>sk</option> | |
<option>sl</option> | |
<option>sq</option> | |
<option>sq-MK</option> | |
<option>sq-XK</option> | |
<option>sr</option> | |
<option>sr-Cyrl</option> | |
<option>sr-Cyrl-BA</option> | |
<option>sr-Cyrl-ME</option> | |
<option>sr-Cyrl-XK</option> | |
<option>sr-Latn</option> | |
<option>sr-Latn-BA</option> | |
<option>sr-Latn-ME</option> | |
<option>sr-Latn-XK</option> | |
<option>sv</option> | |
<option>sv-AX</option> | |
<option>sv-FI</option> | |
<option>sw</option> | |
<option>sw-CD</option> | |
<option>sw-KE</option> | |
<option>sw-UG</option> | |
<option>ta</option> | |
<option>ta-LK</option> | |
<option>ta-MY</option> | |
<option>ta-SG</option> | |
<option>te</option> | |
<option>th</option> | |
<option>to</option> | |
<option>tr</option> | |
<option>tr-CY</option> | |
<option>uk</option> | |
<option>ur</option> | |
<option>ur-IN</option> | |
<option>uz</option> | |
<option>uz-Latn</option> | |
<option>vi</option> | |
<option>zh</option> | |
<option>zh-Hans</option> | |
<option>zh-Hans-HK</option> | |
<option>zh-Hans-MO</option> | |
<option>zh-Hans-SG</option> | |
<option>zh-Hant</option> | |
<option>zh-Hant-HK</option> | |
<option>zh-Hant-MO</option> | |
<option>zu</option> | |
</select> | |
<span id="exampleFormats" style="display: inline;">A number may look like this: 11,7 and a date may look like this: 6/10/2015</span> | |
<span id="loading" style="display: none;">Loading...</span> | |
</div> | |
<div class="row"> | |
<label for="Double">Double</label> | |
<input data-msg-number="The field Double must be a number." data-msg-range="The field Double must be between 10.5 and 20.3." data-msg-required="The Double field is required." data-rule-number="true" data-rule-range="[10.5,20.3]" data-rule-required="true" id="Double" name="Double" type="text" value="0" aria-required="true"> | |
</div> | |
<div class="row"> | |
<label for="DateTime">DateTime</label> | |
<input data-msg-date="The field DateTime must be a date." data-msg-required="The DateTime field is required." data-rule-date="true" data-rule-required="true" id="DateTime" name="DateTime" type="text" value="" aria-required="true"> | |
</div> | |
<div class="row"> | |
<button type="submit" class="btn btn-default">Submit</button> | |
<button type="reset" class="btn btn-info">Reset</button> | |
</div> | |
</form> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/bootstrap.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.validate.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr/event.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldrjs/dist/cldr/supplemental.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize/number.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/globalize/dist/globalize/date.js"></script> | |
<script src="https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/Scripts/jquery.validate.globalize.js"></script> | |
<script> | |
function getJsonFilenames(locale, loadedData) { | |
return [ | |
"supplemental/likelySubtags.json", | |
"main/{locale}/numbers.json", | |
"supplemental/numberingSystems.json", | |
"main/{locale}/ca-gregorian.json", | |
"main/{locale}/timeZoneNames.json", | |
"supplemental/timeData.json", | |
"supplemental/weekData.json", | |
"main/{locale}/languages.json" | |
].filter(function (f) { | |
var noDataLoaded = loadedData.length === 0; | |
if (noDataLoaded) { | |
return true; | |
} | |
var localeNotYetLoaded = loadedData.indexOf(locale) === -1; | |
if (localeNotYetLoaded) { | |
var fileIsCommonAndSoAlreadyLoaded = f.indexOf("supplemental/" !== -1); | |
return fileIsCommonAndSoAlreadyLoaded; | |
} | |
return false; | |
}).map(function (f) { return "https://johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/bower_components/cldr-data/" + f.replace("{locale}", locale); }); | |
} | |
function loadLocale(locale, loadedData) { | |
var promise = $.Deferred(); | |
var jsonToLoad = getJsonFilenames(locale, loadedData); | |
if (jsonToLoad.length === 0) { | |
Globalize.locale(locale); // Presumably already loaded | |
promise.resolve(locale + " selected...") | |
return promise; | |
} | |
return $.when.apply( | |
this, jsonToLoad.map($.get) | |
).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 () { | |
loadedData.push(locale); | |
Globalize.locale(locale); | |
return locale + " loaded and selected..." | |
}); | |
} | |
var localesLoaded = []; | |
$("form").validate({ | |
submitHandler: function (form) { | |
alert("This is a valid form!"); | |
} | |
}); | |
$("#localeSelector").change(function () { | |
var $this = $(this); | |
var $exampleFormats = $("#exampleFormats"); | |
var $loading = $("#loading"); | |
$this.prop("disabled", true); | |
$loading.show(); | |
$exampleFormats.hide(); | |
var localeToLoad = $this.val(); | |
loadLocale(localeToLoad, localesLoaded) | |
.then(function (result) { | |
$this.prop("disabled", false); | |
$loading.hide(); | |
var languageName = Globalize.locale().main('localeDisplayNames/languages/' + localeToLoad); | |
languageName = (languageName | |
? languageName + ' / ' + Globalize.locale('en').main('localeDisplayNames/languages/' + localeToLoad) + ' : ' | |
: ''); | |
var exampleFormats = languageName + "A number may look like this: " + Globalize.numberFormatter()(11.7) + | |
" and a date may look like this: " + Globalize.dateFormatter()(new Date()); | |
$exampleFormats.text(exampleFormats).show(); | |
}, function (error) { | |
$exampleFormats.text("Problem loading locale: " + error).show(); | |
$this.prop("disabled", false); | |
$loading.hide(); | |
}); | |
}).change(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment