I want to perform simple validation against multiple fields. Please note these fields are not within a mx:Form since the way they are displayed isn't the norm. The validation works properly, however, it does not highlight the textInput with the error message.
myValidator.source = empName1;
myValidator.property = "text";
if(myValidator.validate().type == ValidationResultEvent.VALID)
{
Alert.show("good");
}
...
<mx:StringValidator id="myValidator" required="true" minLength="1" requiredFieldError="This field is required" />
<mx:TextInput x="152" y="32" width="207" id="empName1"/>
Please note I want to use the same validator "myValidator" against multiple fields which is why the source and property are set in the actionscript 3 code.
Thanks
Update:
heres a similar function I created that works:
private function validateField(fields:Array):Boolean
{
var rtnResult:Boolean = true;
for each(var i:Object in fields)
{
myValidator.source = i;
myValidator.property = "text";
i.validateNow();
if(myValidator.validate().type == ValidationResultEvent.INVALID)
rtnResult = false;
}
return rtnResult;
}
which is called like so:
if(!validateField([TicketTitle,TicketDesc]))
{
Alert.show("Required fields were left blank!", "Warning");
return;
}
and the mxml validator
<mx:StringValidator id="myValidator" required="true" minLength="1" requiredFieldError="This field is required" />
Solved it... I needed this:
empName1.validateNow();
Related
I have setup a ComboBox named cmbCopyFrom and its visibility is based on the whether a item 'Pricing Zone' was selected from another ComboBox, cmbBoundary, and it sometimes doesn't make the cmbCopyFrom to be visible even though, Pricing zone was selected. Not sure what might be causing this. Any suggestions?
<s:ComboBox id="cmbBoundary" prompt="Select a Boundary"
labelFunction="codeLabel" />
<s:ComboBox id="cmbCopyFrom" prompt="Copy From" labelFunction="codeLabelKey"
dataProvider="{model.arrOfLOB}"
includeInLayout="{model.isCopyFromVisible}"
visible="{model.isCopyFromVisible}" />
cmbBoundary.addEventListener(IndexChangeEvent.CHANGE,boundarySelected);
protected function boundarySelected(evt:IndexChangeEvent):void {
trace("Index change event fired..."+this.cmbBoundary.selectedItem.name);
if (this.cmbBoundary.selectedItem && this.cmbBoundary.selectedItem.name == "Pricing Zones" ) {
model.isCopyFromVisible = true;
}
else {
model.isCopyFromVisible = false;
}
}
I need to bind a property to an edit control and have the control write its value back to the same property. The problem is, I'm setting the source value before the control is created:
<mx:Panel>
<mx:Script>
<![CDATA[
[Bindable] public var editedDocument: XML;
]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{editedDocument.#label}"/>
<mx:Binding source="docLabel.text" destination="editedDocument.#label"/>
</mx:Panel>
I call this like so:
var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);
What happens is this:
the docLabel text field ends up blank (equal to "")
the xmlDoc's #label attribute is set to ""
What I want is this:
the docLabel text field should contain "some label"
the xmlDoc's #label attribute should change only when the docLabel's text property changes.
How do I accomplish this, using Flex 3?
Edit
I have also tried this:
<mx:Panel>
<mx:Script>
<![CDATA[
[Bindable] public var editedDocument: XML;
]]>
</mx:Script>
<mx:TextInput id="docLabel"/>
<mx:Binding source="editedDocument.#label" destination="docLabel.text"/>
<mx:Binding source="docLabel.text" destination="editedDocument.#label"/>
</mx:Panel>
The result is the same.
You can try using BindingUtils to programmatically create the binding after the class has been created:
http://life.neophi.com/danielr/2007/03/programmatic_bindings.html
There are many variations of this that I've used to tackle similar problems. If you can't figure it out from the link post a comment and I'll dig through my source code and see what I can find.
private function init():void
{
var xmlDoc: XML = <document label="some label" />;
var myPanel: MyPanel = new MyPanel();
myPanel.editedDocument = xmlDoc;
parent.addChild(myPanel);
BindingUtils.bindProperty(docLabel, "text", editedDocument, "label");
//or maybe it should be one of these, I have not done binding to an XML attribute before
BindingUtils.bindProperty(docLabel, "text", editedDocument, "#label");
BindingUtils.bindProperty(docLabel, "text", editedDocument, "{#label}");
}
Take a look at Two-way data binding.
Take a look at the part of the text:
In Flex 3, if you want to set
two-way binding using the
mx:Binding
tag you need to set it twice:
mx:Binding source="a.property" destination="b.property"/>
mx:Binding source="b.property" destination="a.property"/>
which becomes:
mx:Binding source="a.property" destination="b.property" twoWay="true"/>
In Flex 3 you would be better of doing something like this. Also not sure you can bind directly to XML?
Instead do something like this:
[Bindable] public var tmpString: String;
public var onChange():void {
tmpString = docLabel.text;
//set the XML string, etc.
}
]]>
</mx:Script>
<mx:TextInput id="docLabel" text="{tmpString}" change="onChange()" />
I think bidirectional data binding is a new feature in Flex 4.
This is straight from Adboe http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding, and it's Flex 3 too!
I created custom controls that programmatically create two-way bindings when given a provider object that has a suitable property whose name matches the control's id. Here's an example for a TextInput:
public class BoundTextInput extends TextInput
{
// some code omitted for brevity:
// Create getter / setter pair, call invalidateProperties()
// and set internal flag for efficiency
// create bindings in commitProperties:
override protected function commitProperties():void
{
if (this._fProviderChanged) {
this._fProviderChanged = false;
if (null != this._provider && this._provider.hasOwnProperty(this.id) && this._provider[this.id] is String) {
// this is the core bit
BindingUtils.bindProperty(this, "text", this._provider, this.id);
BindingUtils.bindProperty(this._provider, this.id, this, "text");
}
}
// Normally, you call the overridden method first,
// but we want to see the values initialized by the new
// binding right away, so we first create the bindings
// and then commit all inherited properties
super.commitProperties();
}
}
This is an example of how I use it inside one of my other components (a popup dialog). The data property is set to an instance of the appropriate model class, which is always a dumb, [Bindable] container.
<?xml version="1.0" encoding="utf-8"?>
<PopUp xmlns="com.econemon.suite.gui.components.*" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Form width="100%" height="100%" >
<mx:FormHeading label="Server-URL" />
<mx:FormItem label="URL" >
<!--
If it is available, and of type String, data.urlServer
is bound to the text property of this TextInput
-->
<BoundTextInput id="urlServer" provider="{this.data}"/>
</mx:FormItem>
<mx:FormItem>
<mx:Button label="OK" click="this.submit(event)" />
</mx:FormItem>
</mx:Form>
</PopUp>
How to remove validation programmatically from flex component
This is my method
public static function validateRequired(txt:TextInput, errorMessage:String="This field is required"):Boolean
{
var v:Validator = new Validator();
v.listener = txt;
var result:ValidationResultEvent = v.validate(txt.text);
var returnResult:Boolean = (result.type == ValidationResultEvent.VALID);
//Alert.show("validation result is " + returnResult);
if (!returnResult) {
v.requiredFieldError = errorMessage;
}
return returnResult;
}
But, as each time i am creating new validator, so pop-up contains multiple messages like
This field is required.
This field is required.
How to remove error messages attached with component?
I had the same problem, I understood that i had to clear the last validation before the next one.
private function resetValidationWarnings():void {
for each (var validator:Validator in arrValidators) {
validator.dispatchEvent(new ValidationResultEvent(ValidationResultEvent.VALID));
}
}
this is a kinda POG but it got the job done!
hope it helps !
The Validator.enabled property lets you enable and disable a validator. When the value of the enabled property is true, the validator is enabled; when the value is false, the validator is disabled. When a validator is disabled, it dispatches no events, and the validate() method returns null.
For example, you can set the enabled property by using data binding, as the following code shows:
<?xml version="1.0"?>
<!-- validators\EnableVal.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:ZipCodeValidator id="zcVal"
source="{inputA}"
property="text"
required="true"
enabled="{enableV.selected}"/>
<mx:TextInput id="inputA"/>
<mx:TextInput/>
<mx:CheckBox id="enableV"
label="Validate input?"/>
</mx:Application>
I also encountered similar problem. In my case, the root cause is I created the validator object every time the validation is called (just as you did). As a result, the UIComponent see it as different validator object (see UIComponent.errorObjectArray) and stored the error message again. The solution is to have a global or static validator and it solves the duplicate error message for me.
I have got two labels in my flex mxml component.
first one shows playheadtime of videodisplay and another is also used for same purpose. the difference is that when we are in add mode(decided from a flag variable) both should show current playheadtime using binding. but when we are in edit mode(again decided from flag) the latter label should remain static, to be more specific, the value retrived from database.
how can I do that using actionscript. I tried ChangeWathcer but I found it a bit tricky. Is there any other simpler way or am I missing something.
following is my code.
private function init():void
{
if (queFlag == 'a')
{
// timeLbl.text = currentTimeLbl.text using some binding mechanism
}
else if(queFlag == 'e')
{
// timeLbl.text = 'value retrived from database' ;
}
}
here currentTimeLbl shows videoDisplay playheadtime so it changes dynamically as video plays.
please help me out.
You could do it in something like the following:
<Label id="timeLbl" text="{timeLabelText}"/>
<Label id="currentTimeLbl" change="dispatchEvent('currentTimeLblChanged')"/>
[Bindable(event = "queFlagChanged")]
[Bindable(event = "currentTimeLblChanged")]
private function get timeLabelText():String
{
if(_queFlag == 'a')
{
return currentTimeLbl.text;
}
else
{
return 'value retrived from database';
}
}
public function set queFlag(value:String):void
{
_queFlag = value;
dispatchEvent(new Event("queFlagChanged"));
}
Here is a very short way of conditional binding in Flex. If you code the conditions into MXML curly-bracket-bindings they will be transformed by the MXML compiler to listeners on all objects participating in this expression.
Here is a working example:
<mx:CheckBox id="flagBox"/>
<mx:ComboBox dataProvider="{['a','e']}" id="flagBox2"/>
<mx:TextInput id="txtBox"/>
<mx:Label text="default: {txtBox.text}"/>
<mx:Label text="conditional (bool): { (flagBox.selected)? txtBox.text: 'default' }"/>
<mx:Label text="conditional (value): { (flagBox2.selectedItem == 'a')? txtBox.text: 'default' }"/>
Checking flagBox will result in label #2 displaying "default" otherwise the text from the txtBox is displayed.
Selecting "a" in flagBox2 will result in label #3 displaying "default" otherwise the text from the txtBox is displayed.
I regularly use this for reducing my lines of code in my UI-logic and it works quite well for me. A problem of this techniques is that you can't use all logic symbols in curly-braket-bindings, such as < or &&, but i usually could life with that.
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)
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!
Steps to reproduce:
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;
}
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.
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.
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.
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 View Screen Shot