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.

<?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 name="StringUtil_trim_test"
        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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

7 Responses to Trimming strings using the Flex StringUtil class’s trim() method

  1. Shital says:

    good one!really helpful

  2. Vidya says:

    nice one….keep updating for new things

  3. Zidan says:

    very nice , i have the same issue but when i try that in my application , i find the text in the center of the textinput as if the spaces still exist but it is already trimmed !! i don’t know what is the problem can you help ?

  4. Zidan says:

    i found the solution if someone faced it , i had to set the property “horizontalcrollposition” in the textinput to zero

  5. Paul Michael says:

    Once again I say, thank you! :)

  6. Biswa says:

    Thanks a lot,Really really helped me .

  7. Bala says:

    Thanks A lot Peter. It was very use-full.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree