use the same validator on several controls in Flex

Question

Say I have a phone-number validator in flex and I have two TextInput controls for phone numbers. I don't want to have two separate validator controls defined that have essentially the same attributes... but each validator has only one "source" attribute. How can I use the same validator on multiple control? (or any equivalent solution)

Answer 1

Not inline, but you can perform the validation programmatically, say, on submission of a form, or when a user tabs out of a control, etc. Here's an example using a single PhoneNumberValidator to validate two form fields; the validation happens when the Submit button gets clicked:

<mx:Script>
    <![CDATA[

     private function validatePhoneNumber(txt:TextInput):void
     {
      v.listener = txt;
      v.validate(txt.text);
     }

     private function btn_click():void
     {
      validatePhoneNumber(p1);
      validatePhoneNumber(p2);
     }

    ]]>
</mx:Script>

<mx:PhoneNumberValidator id="v" allowedFormatChars="()- .+" property="text" requiredFieldError="Required." wrongLengthError="Invalid length." invalidCharError="Invalid character." />

<mx:Form>
    <mx:FormItem label="Phone Number 1">
     <mx:TextInput id="p1" /> 
    </mx:FormItem>
    <mx:FormItem label="Phone Number 2">
     <mx:TextInput id="p2" /> 
    </mx:FormItem>
    <mx:FormItem>
     <mx:Button id="btn" label="Submit" click="btn_click()" />
    </mx:FormItem>
</mx:Form>

Hope it helps!

Answer 2

Steps to reproduce:

1. TextInput creates dynamically

textInputBox = new MyTextInput;

textInputBox.restrict = “0-9.”; textInputBox.maxChars = 24; amountValidator = new NumberValidator(); amountValidator.source = textInputBox; amountValidator.property = “text”; amountValidator.allowNegative = false; amountValidator.domain = “real”; amountValidator.precision = 4; amountValidator.required = false; amountValidator.maxValue = 999999999999.9999; amountValidator.trigger = textInputBox; amountValidator.triggerEvent = Event.CHANGE; amountValidator.addEventListener(ValidationResultEvent.VALID, amountValid); amountValidator.addEventListener(ValidationResultEvent.INVALID, amountInvalid);

private function amountValid(event:ValidationResultEvent):void { valid = true; fieldsValidated = true; }

private function amountInvalid(event:ValidationResultEvent):void {

valid = false; fieldsValidated = true; }

1. As mention in the creation, when we exceed the limit, it shows error my red color border, and the same time if you delete them by DEL key when it come to the given acceptable limit, automatically become to green soon.
2. Leave from the field and change values of another textinput(this is just a textinput, this is a form there are some more form elemets), then come back to value exceeded textfield by SHIFT+TABS and remove the additional entered numbers, when you come to green soon your value is accepted. 4.Now again enter more values and now you are in the warn zone, then leave from the field and do the few changes in other form elements.
3. Then come back to the value exceeded text filed by MOUSE CLICK, and start delete from DEL, even though you removed additional values, still fields shows that you are in warn zone.

Actual Results: Even when remove additional numbers,still field is Red

Expected Results: if remove additional numbers, field should come its normal status.

Picture of this issue can be viewed at http://bugs.adobe.com/jira/browse/SDK-24372″> View Screen Shot