Topic
  • 4 replies
  • Latest Post - ‏2014-04-25T11:03:56Z by canutri
canutri
canutri
357 Posts

Pinned topic Decimal input for Dojo Text Field

‏2014-04-22T19:55:32Z |

What is the best method to limit input of a dojo text field to decimal data only?  I know a formatter could be used to transpose the input to valid characters, but that would still allow the user to enter 123abc4.56xyz when 1234.56 is the valid formatted result.

We've considered and attempted using an onKeyUp event by interrogating each key press and removing anything other than 0-9 and . (decimal/period) but all the possible navigation keys need to be handle also.  This seems too daunting, yet there doesn't appear to be a more elegant method as referenced on the cafe or in help.

I know this has had to been addressed before and am hopeful that I'm just not searching the topic with the proper keywords and such.

Thank you,

Daron

Updated on 2014-04-24T16:26:59Z at 2014-04-24T16:26:59Z by canutri
  • gweis
    gweis
    33 Posts
    ACCEPTED ANSWER

    Re: Decimal input for Dojo Text Field

    ‏2014-04-25T05:27:57Z  
    • canutri
    • ‏2014-04-24T16:26:28Z

    Hi Guus,

    Although I haven't  applied your code example in my project, it appears to be doing exactly what I asked.

    Do you think NumerifFielValidator() could be used as a validators argument instead of using onFocusLost event?  We're still trying to understand the depth of RUI's MVC support.  But it would seen natural that your function could participate as a validator and which could be beneficial using the form's validation methods and property.

    I think I'll get your example working and then explore further.

    Thank you,

    -Daron

    Hi Daron,

    Yes you can certainly call the checkNumericValue() function inside the NumericFieldValidator, after slightly altering it to accepting a value instead of a widget. Then you would have no need for the onFocusLost-listener anymore.

    Consequence is that the errormessage appears as long as the entered value does not meet with it´s constraints. For example, with a minvalue of 1000, and error will appear after entering 1 and 10 and 100, and will only disappear after entering 1000 or any other bigger value. Or, with a validator on a phone number, the error message will appear while entering the phone number´s digits, until the value meets the phone number´s requirements.

    Since we find that quite annoying we decided to have the validator do syntax checking, and do some semantic checking when leaving the field..

    Guus.

     

  • gweis
    gweis
    33 Posts

    Re: Decimal input for Dojo Text Field

    ‏2014-04-23T06:37:21Z  

    Hi Daron,

    We have experienced the same as you. Did you already consider building your own validator? Something like:

    handler Example type RUIHandler { initialUI = [ui] }
                
        private ui Box {padding = 15, columns = 1, children = [field1, field2, field3] };
        private field1 DojoTextField{margin = 15, constraints = new Dictionary{numerictype = "decimal", minvalue = 0}, validators = [NumericFieldValidator], onFocusLost ::= field_onFocusLost};
        private field2 DojoTextField{margin = 15, constraints = new Dictionary{numerictype = "integer"}, validators = [NumericFieldValidator], onFocusLost ::= field_onFocusLost};
        private field3 DojoTextField{margin = 15};
        private widgetToFocus Widget;
    
        private function field_onFocusLost (e Event in)
                    checkNumericValue(e.widget);
                    e.preventDefault();
        end
            
        function NumericFieldValidator(input string in, constraints Dictionary in) returns(string?)
                result string? = null;
    
                inputMask string;
                case
                        when (constraints.containsKey("numerictype") and constraints["numerictype"] as string == "integer")
                                inputMask = "[0-9]+";
                        otherwise
                                inputMask = "[0-9,-]+";
                end
    
                if (clip(input) != "" and !DojoLib.VALIDATORS.PatternValidator(input, inputMask))
                        result = "Field contains invalid characters";
                end
                    
                return(result);
        end
    
        function checkNumericValue(widget Widget in)
                if (widget isa DojoTextField)
                        widgetToValidate DojoTextField = widget;
                        widgetToValidate.showErrorIndicator(false);
                        widgetToValidate.showErrorMessage(null);
                        if (widgetToValidate.text != "")
                                validatedOk boolean;
                                floatValue float;
                                try
                                        floatValue = widgetToValidate.text;
                                        validatedOk = true;
                                onException(exception AnyException)
                                        widgetToValidate.showErrorIndicator(true);
                                        widgetToValidate.showErrorMessage("Field contains invalid characters.");
                                        widgetToFocus = widgetToValidate;
                                        new Job{runFunction = focusDojoWidget}.schedule(100);
                                end
                                if (validatedOk)
                                        if (widgetToValidate.constraints.containsKey("minvalue"))
                                                minValue int = widgetToValidate.constraints["minvalue"];
                                                if (floatValue < minValue)
                                                            widgetToValidate.showErrorIndicator(true);
                                                            widgetToValidate.showErrorMessage("Value too small.");
                                                        widgetToFocus = widgetToValidate;
                                                        new Job{runFunction = focusDojoWidget}.schedule(100);
                                                        validatedOk = false;
                                                end
                                        end
                                end
                        end
                end
            end
    
            function focusDojoWidget()
                    widgetToFocus.focus();
            end
    
    end
    

    We have put the latter three functions in a library (amongst other custom validation functions) so we can use them from anywhere in our rui-app.

     

    Guus

     

    Updated on 2014-04-23T06:40:10Z at 2014-04-23T06:40:10Z by gweis
  • canutri
    canutri
    357 Posts

    Re: Decimal input for Dojo Text Field

    ‏2014-04-24T16:26:28Z  
    • gweis
    • ‏2014-04-23T06:37:21Z

    Hi Daron,

    We have experienced the same as you. Did you already consider building your own validator? Something like:

    <pre class="html dw" data-editor-lang="js" data-pbcklang="html" dir="ltr">handler Example type RUIHandler { initialUI = [ui] } private ui Box {padding = 15, columns = 1, children = [field1, field2, field3] }; private field1 DojoTextField{margin = 15, constraints = new Dictionary{numerictype = "decimal", minvalue = 0}, validators = [NumericFieldValidator], onFocusLost ::= field_onFocusLost}; private field2 DojoTextField{margin = 15, constraints = new Dictionary{numerictype = "integer"}, validators = [NumericFieldValidator], onFocusLost ::= field_onFocusLost}; private field3 DojoTextField{margin = 15}; private widgetToFocus Widget; private function field_onFocusLost (e Event in) checkNumericValue(e.widget); e.preventDefault(); end function NumericFieldValidator(input string in, constraints Dictionary in) returns(string?) result string? = null; inputMask string; case when (constraints.containsKey("numerictype") and constraints["numerictype"] as string == "integer") inputMask = "[0-9]+"; otherwise inputMask = "[0-9,-]+"; end if (clip(input) != "" and !DojoLib.VALIDATORS.PatternValidator(input, inputMask)) result = "Field contains invalid characters"; end return(result); end function checkNumericValue(widget Widget in) if (widget isa DojoTextField) widgetToValidate DojoTextField = widget; widgetToValidate.showErrorIndicator(false); widgetToValidate.showErrorMessage(null); if (widgetToValidate.text != "") validatedOk boolean; floatValue float; try floatValue = widgetToValidate.text; validatedOk = true; onException(exception AnyException) widgetToValidate.showErrorIndicator(true); widgetToValidate.showErrorMessage("Field contains invalid characters."); widgetToFocus = widgetToValidate; new Job{runFunction = focusDojoWidget}.schedule(100); end if (validatedOk) if (widgetToValidate.constraints.containsKey("minvalue")) minValue int = widgetToValidate.constraints["minvalue"]; if (floatValue < minValue) widgetToValidate.showErrorIndicator(true); widgetToValidate.showErrorMessage("Value too small."); widgetToFocus = widgetToValidate; new Job{runFunction = focusDojoWidget}.schedule(100); validatedOk = false; end end end end end end function focusDojoWidget() widgetToFocus.focus(); end end </pre>

    We have put the latter three functions in a library (amongst other custom validation functions) so we can use them from anywhere in our rui-app.

     

    Guus

     

    Hi Guus,

    Although I haven't  applied your code example in my project, it appears to be doing exactly what I asked.

    Do you think NumerifFielValidator() could be used as a validators argument instead of using onFocusLost event?  We're still trying to understand the depth of RUI's MVC support.  But it would seen natural that your function could participate as a validator and which could be beneficial using the form's validation methods and property.

    I think I'll get your example working and then explore further.

    Thank you,

    -Daron

  • gweis
    gweis
    33 Posts

    Re: Decimal input for Dojo Text Field

    ‏2014-04-25T05:27:57Z  
    • canutri
    • ‏2014-04-24T16:26:28Z

    Hi Guus,

    Although I haven't  applied your code example in my project, it appears to be doing exactly what I asked.

    Do you think NumerifFielValidator() could be used as a validators argument instead of using onFocusLost event?  We're still trying to understand the depth of RUI's MVC support.  But it would seen natural that your function could participate as a validator and which could be beneficial using the form's validation methods and property.

    I think I'll get your example working and then explore further.

    Thank you,

    -Daron

    Hi Daron,

    Yes you can certainly call the checkNumericValue() function inside the NumericFieldValidator, after slightly altering it to accepting a value instead of a widget. Then you would have no need for the onFocusLost-listener anymore.

    Consequence is that the errormessage appears as long as the entered value does not meet with it´s constraints. For example, with a minvalue of 1000, and error will appear after entering 1 and 10 and 100, and will only disappear after entering 1000 or any other bigger value. Or, with a validator on a phone number, the error message will appear while entering the phone number´s digits, until the value meets the phone number´s requirements.

    Since we find that quite annoying we decided to have the validator do syntax checking, and do some semantic checking when leaving the field..

    Guus.

     

  • canutri
    canutri
    357 Posts

    Re: Decimal input for Dojo Text Field

    ‏2014-04-25T11:03:56Z  
    • gweis
    • ‏2014-04-25T05:27:57Z

    Hi Daron,

    Yes you can certainly call the checkNumericValue() function inside the NumericFieldValidator, after slightly altering it to accepting a value instead of a widget. Then you would have no need for the onFocusLost-listener anymore.

    Consequence is that the errormessage appears as long as the entered value does not meet with it´s constraints. For example, with a minvalue of 1000, and error will appear after entering 1 and 10 and 100, and will only disappear after entering 1000 or any other bigger value. Or, with a validator on a phone number, the error message will appear while entering the phone number´s digits, until the value meets the phone number´s requirements.

    Since we find that quite annoying we decided to have the validator do syntax checking, and do some semantic checking when leaving the field..

    Guus.

     

    Hi Guus,

    Wow, that is an unsightly side-effect for using the validator in that way.

    Thank you for the help.

    -Daron