Does dijit/form/NumberTextBox support Arabic numerals

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

  •  17-06-2023
  •  | 
  •  

Question

I can't seem to get a dijit/form/NumberTextbox to allow East Arabic numerals as input, even if the locale is set to ar-eg (for example). As a simple example:

<!doctype html>
<html>

<head>
   <script>
      dojoConfig = {
         locale: 'ar-eg',
         async: false,
         parseOnLoad: false
      };
   </script>
<!--   <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js" djConfig='parseOnLoad: false'></script>-->
<script type="text/javascript" src="path/to/dojo/dojo.js.uncompressed.js"></script>
    <link rel="stylesheet" type="text/css" href="path/to/dijit/themes/claro/claro.css"/>
</head>

<body class='claro' dir='rtl'>

  Some Arabic, for copy-pasting:  ٤٥٦ ( == 456)<p>

  Enter a number: <div id='ntb'></div>
  <script>
  require(['dijit/form/NumberTextBox', 'dojo/domReady!'], function(NumberTextBox) {
     new NumberTextBox({
//lang: 'ar', constraints: { formatLength: 'short', localeDigit: true }
//lang: 'ar', constraints: { localeDigit: true }
      }, 'ntb');
   });
   </script>

</body>

</html>

The NumberTextBox gives me a validation error, saying "The value entered is incorrect." I've tried specifying a specific language for the NumberTextBox, and a mysterious "localeDigit" property that is undocumented but used in some of their tests, but can't seem to get anything to work.

Is there a way to get Dojo to validate East Arabic numbers in NumberTextBoxes?

Was it helpful?

Solution

I don't have a direct solution to your issue, since the code looks fine to me (maybe it's just a Dojo bug?). But I do have a solid workaround.

Just create your own widget which extends the NumberTextBox, then overrule the "isValid" method with your own validation logic for arabic digits.

// @formatter:off
define([
  "dojo/_base/declare",
  "dojo/_base/lang",
  "dijit/form/NumberTextBox"
// @formatter:on
], function(declare, lang, NumberTextBox) {

  return declare("your.form.NumberTextBox", [NumberTextBox], {

    isValid: function(/*Boolean*/ /*===== isFocused =====*/) {
      var valid = this.inherited(arguments);

      // your custom validation logic here
      var value = this.get("value"); // the current value

      return valid;
    }
  });
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top