Flex Examples

The following example shows you how to use the StringUtil.trim() method in Flex to remove leading and trailing whitespace from form fields before validating user input. This allows you to make sure that user’s don’t try anything sneaky like enter spaces instead of characters to bypass any minimum length validation you may have in place when validating data.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/07/trimming-strings-using-the-flex-stringutil-classs-trim-method/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .errorTip {
            borderColor: haloBlue;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.TextInput;
            import mx.utils.StringUtil;
            import mx.validators.Validator;

            private function trimStr(evt:FocusEvent):void {
                var ti:TextInput = TextInput(evt.currentTarget);
                ti.text = StringUtil.trim(ti.text);
            }

            private function validateForm():void {
                var errors:Array = Validator.validateAll(validatorArray);
                if (errors.length) {
                    Alert.show("Form is somehow invalid.", "INVALID");
                } else {
                    Alert.show("Form is valid.", "VALID");
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="validatorArray">
        <mx:StringValidator id="firstNameValidator"
                source="{firstName}"
                property="text"
                required="true" />
        <mx:StringValidator id="lastNameValidator"
                source="{lastName}"
                property="text"
                required="true" />
        <mx:EmailValidator id="emailValidator"
                source="{email}"
                property="text"
                required="true" />
    </mx:Array>

    <mx:Form>
        <mx:FormItem label="First name:" required="true">
            <mx:TextInput id="firstName" focusOut="trimStr(event)" />
        </mx:FormItem>
        <mx:FormItem label="Last name:" required="true">
            <mx:TextInput id="lastName" focusOut="trimStr(event)" />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput id="email" focusOut="trimStr(event)" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Submit" click="validateForm()" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.