Show error when value of numeric stepper out of range - actionscript-3

Question

When I set maximum and minimum for a numeric stepper, I still can enter a number out of that range. But it is automatically receive the maximum value if I enter a number greater than that. How can I show error for this case, but still keep set maximum and minimum value?

Answer 1

When the user hit ENTER key or focus out from the text input of the NumericStepper you can put your logic to check if the entered number is within the range as below:
<?xml version="1.0"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
import mx.controls.Alert;
private var isProcessRequiredOnFocusOut:Boolean = true;
private function addEventListeners():void {
numericStepper.addEventListener(KeyboardEvent.KEY_DOWN, checkRange, true);
numericStepper.addEventListener(FocusEvent.FOCUS_OUT, checkRange, true);
}
private function checkRange(event:Event):void {
if (event is KeyboardEvent && (event as KeyboardEvent).keyCode == Keyboard.ENTER) {
isProcessRequiredOnFocusOut = false;
processRangeCheck();
}
else if (event is FocusEvent && (event as FocusEvent).type == FocusEvent.FOCUS_OUT
&& isProcessRequiredOnFocusOut) {
processRangeCheck();
}
}
private function processRangeCheck():void {
var typedNumber:Number = Number(numericStepper.textDisplay.text);
if (typedNumber > numericStepper.maximum || typedNumber < numericStepper.minimum) {
Alert.show("The typed number " + typedNumber + " is out of range.", "Out of Range Warning");
}
isProcessRequiredOnFocusOut = true;
}
]]></fx:Script>
<s:Panel title="Show Error message when Typed Number is out of range in Numeric Stepper."
verticalCenter="0" horizontalCenter="0">
<s:VGroup paddingTop="10" paddingLeft="10"
paddingRight="10" paddingBottom="10"
horizontalAlign="center"
width="100%">
<s:Label text="The valid range of Numeric Stepper is 10-20."/>
<s:NumericStepper id="numericStepper"
minimum="10"
maximum="20"
creationComplete="addEventListeners()"/>
<s:Button label="Click here to focus out from the Text Input of Numeric Stepper."/>
</s:VGroup>
</s:Panel>
</s:Application>

Answer 2

Well, an intuitive way to check the entered value against the maximum and the minimum values of an NumericStepper component –while it's still getting entered, would be to listen to the keyboard event of KEY_UP on the textField property of the NumericStepper instance:
import fl.controls.NumericStepper;
import flash.events.KeyboardEvent;
var numericStepper:NumericStepper = new NumericStepper();
numericStepper.maximum = 250;
numericStepper.minimum = 3;
numericStepper.textField.addEventListener(KeyboardEvent.KEY_UP, function(e:Event):void {
var n:Number = Number(numericStepper.textField.text);
if (n > numericStepper.maximum || n < numericStepper.minimum) {
trace("Error: Out of Range!");
}
});
addChild(numericStepper);

Answer 3

Use mx_internal property to refer to the inputField of the NumericStepper
numericStepper.maximum = 250;
numericStepper.minimum = 3;
numericStepper.mx_internal::inputField.addEventListener(KeyboardEvent.KEY_UP, function(e:Event):void {
var n:Number = Number(numericStepper.mx_internal::inputField.text);
if (n > numericStepper.maximum || n < numericStepper.minimum) {
Alert.show("Error: Out of Range!");
}
});