It seems like a code written right but I don't get an error message when I try to skip first name field. Instead I see a little yellow triangle with an exclamation mark in it, that appears next to the first name field. What can be a reason for this? Thanks.
<fx:Declarations>
<s:RadioButtonGroup id="phoneRadioButtonGroup"/>
<mx:StringValidator id="firstNameValidator" source="{firstNameTextInput}"
property="text" requiredFieldError="This field is required" required="true"/>
<mx:StringValidator id="lastNameValidator" source="{lastNameTextInput}"
property="text" required="false" tooShortError="Please enter at least four characters" minLength="4"/>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<s:Form width="380" height="615" backgroundColor="#56A1B9">
<s:FormHeading label="Contact Editor"/>
<s:FormItem width="252" height="36" label="First Name" required="true">
<s:TextInput id="firstNameTextInput"/>
</s:FormItem>
<s:FormItem width="251" height="36" label="Last Name" required="false">
<s:TextInput id="lastNameTextInput"/>
</s:FormItem>
<mx:HRule width="100%" height="15"/>
<s:FormItem width="252" height="37" label="Email" required="true">
<s:TextInput id="emailTextInput"/>
</s:FormItem>
Set the required field to ..
and set the errorMessage ="required message"
This will resolve the issue
Related
I'm connecting a Flex 4.6 form to SQL Server 2008 using Coldfusion. When my form submits to the DB, I'm finding my variables are crossing and I can't seem to see the problem causing it:
Flex Remote Object Call:
private function RegisterNewEmployee():void{
//remote object and method instantiated
roCreateNewUser.createNewEmployeeProfile(fm_userName.text,
fm_password.text, fm_accessLevel.selectedItem, fm_emailAddress.text,
fm_domainField.selectedItem );
}
Flex Components
<mx:FormItem label="Access Level:" width="182" color="#FFFFFF" required="false">
<s:DropDownList width="60" color="#FFFFFF" id="fm_accessLevel">
<s:dataProvider>
<mx:ArrayList id="accessLevelList">
<fx:String>9</fx:String>
<fx:String>44</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:DropDownList>
</mx:FormItem>
<mx:FormItem label="Email: " fontSize="12" width="173" horizontalAlign="left" color="#FFFFFF" required="false"><s:TextInput color="#000000" id="fm_emailAddress" text="{fm_userName.text}" />
</mx:FormItem><s:Label text="#
" fontSize="14" width="15" height="21" color="#FEFEFE" />
<s:ComboBox color="#FFFFFF" id="fm_domainField" height="22" enabled="true">
<s:dataProvider>
<mx:ArrayList id="domainList">
<fx:String>aaa.com</fx:String>
<fx:String>bbb.com</fx:String>
<fx:String>ccc.com</fx:String>
</mx:ArrayList>
</s:dataProvider>
</s:ComboBox>
Coldfusion Code:
<cfargument name="fm_accessLevel" type="any" default="1">
<cfargument name="fm_emailAddress" type="any" default="user01">
<cfargument name="fm_domainField" type="any" default="aaa.com">
Problem begins here:
<!--- Concatenate email and domain --->
<cfset emailString = #arguments.fm_emailAddress# & "#" & #arguments.fm_domainField# >
Somehow, the outcome of the concatenation returns the equivalent of
<cfset emailString = #arguments.accessLevel# & "#" & #arguments.emailAddress# >
or **44#MyUserName** in plain text output
Any noticeable issues in the code to cause this? It previously worked without
issue. Cache and browser history cleared, issue persists.
I have the FormItem with Label and TextInput controls.
Sample code
<s:FormItem id="mobileLabel" label="Mobile Number">
<s:TextInput id="mobileInput"/>
</s:FormItem>
<s:FormItem id="emailLabel" label="Email ID" required="true">
<s:HGroup>
<s:TextInput id="emailInput"/>
<s:Label id="bindingLabel" text="#xyz.com"/>
</s:HGroup>
</s:FormItem>
Output like this:
How to align the label text as bottom of the label?
like this
You can use the HGroup's proberty verticalAlign. Then your HGroup statement will look like:
<s:HGroup verticalAlign="middle">
<s:TextInput id="emailInput"/>
<s:Label id="bindingLabel" text="#xyz.com"/>
</s:HGroup>
In my application i have both radio buttons and check boxes. Here I want to validate both CheckBox and RadioButton when I move to the next contol.
Edit:
My coding is here
<fx:Declarations>
<s:RadioButtonGroup id="genderOption"/>
<mx:StringValidator
id="radioButtonValidator"
source="{genderOption}"
property="selectedValue"
trigger="{groupLevel}"
listener="{groupLevel}"
required="true"
requiredFieldError="field is required"/>
<mx:StringValidator
id="checkBoxValidation"
source="qualificationGroup"
required="true"
property="selectedValue"
listener="{qualificationGroup}"
requiredFieldError="field is required"/>
</fx:Declarations>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<mx:HDividedBox width="100%" height="100%">
<s:Panel id="mainPanel" title="Employee Details" height="100%" width="50%">
<s:Form id="mainForm" height="100%" width="100%" left="10%" right="10%" top="10%">
<s:FormItem id="genderLabel" label="Gender" showErrorSkin="true" showErrorTip="false">
<s:HGroup id="groupLevel">
<s:RadioButton group="{genderOption}" label="Male" id="male" selected="false"/>
<s:RadioButton group="{genderOption}" label="Female" id="female" selected="false"/>
</s:HGroup>
</s:FormItem>
<s:FormItem id="quaLabel" label="Qualification" showErrorSkin="true" showErrorTip="false">
<s:HGroup id="qualificationGroup">
<s:CheckBox id="bsc" label="B.Sc"/>
<s:CheckBox id="be" label="BE"/>
<s:CheckBox id="mca" label="MCA"/>
<s:CheckBox id="mba" label="MBA"/>
<s:CheckBox id="others" label="Others"/>
</s:HGroup>
</s:FormItem>
</s:Form>
</s:Panel>
</mx:HDividedBox>
And I am the new one for flex. If i am using change or click event, it will display the error message via alert box. But i don't want alert box. Is any other way to display the error message is there?
When you move to the next control add and event listener to call a function to preform the validation checks.
Without more information i cant say which event listener will be applicable, but it will most likely be a click event.
<Script>
<![CDATA[
protected function validate_HDivide(event:MouseEvent):void
{
if(mycheckboxes.validate())
{
//do things
}
else
{
//display error
}
}
<s:HDividedBox id="mycheckboxes" change="validate_HDivide(event)"/>
<s:Button label="submit" click="validate_HDivide(event)"/>
then within your HDividedBox you can preform your validation
Thats how i would do it, hope this help.
I want to make both string and date validator in a single program using flex. can you anyone help me?
Thank you.
I got answer for this question.
`
<fx:Script>
<![CDATA[
// Import necessary classes.
import mx.controls.Alert;
import mx.events.ValidationResultEvent;
import mx.validators.Validator;
private function validate():void
{
var errors : Array = Validator.validateAll([uName,uMail]);
if(errors.length>0)
submitButton.enabled = false;
else
submitButton.enabled = true;
/* submitButton.percentHeight */
}
// Submit form is everything is valid.
private function submitForm():void {
Alert.show("Form Submitted!");
}
]]>
</fx:Script>
<s:layout>
<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
</s:layout>
<fx:Declarations>
<mx:StringValidator
id="uName"
source="{userName}"
property="text"
requiredFieldError="User name is required!"
tooShortError="This string is shorter than the minimum allowed length of 4. "
tooLongError="This string is longer than the maximum allowed length of 20."
minLength="4" maxLength="20"
required="true"/>
<mx:EmailValidator
id="uMail"
source="{userMail}"
property="text" invalidCharError="Invalid character"
required="true" />
</fx:Declarations>
<s:Panel title="Validator Example" width="100%" height="100%"
color="0x000000"
borderAlpha="0.15">
<s:layout>
<s:HorizontalLayout horizontalAlign="left"
paddingLeft="10" paddingRight="10"
paddingTop="10" paddingBottom="10"/>
</s:layout>
<mx:Form color="0x323232" >
<mx:FormItem label="Enter Your Name: " height="40" horizontalAlign="right" required="true">
<s:TextInput id="userName" width="100%" change="validate()"/>
</mx:FormItem>
<mx:FormItem label="Enter Your E-mail Address: " height="40">
<s:TextInput id="userMail" width="100%" change="validate()"/>
</mx:FormItem>
<mx:FormItem >
<s:Button id="submitButton" enabled="false" label="Validate" click="submitForm()"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
`
I am trying to change the stage state to different state on click of a button. The problem is some times am getting exception as The supplied DisplayObject must be child of the caller.
Here is what am trying to do to change the state
this.currentState = 'fullScreen';
here this is a canvas.
Here is the MXML for the State fullscreen
<mx:State name="fullScreen">
<mx:RemoveChild target="{lstExpert}"/>
<mx:RemoveChild target="{screenToggle}"/>
<mx:AddChild relativeTo="{outContainer}" position="firstChild">
<mx:HBox id="topHeaderBox" horizontalAlign="left" verticalAlign="middle" width="98.5%" height="60"/>
</mx:AddChild>
<mx:AddChild relativeTo="{topHeaderBox}" position="firstChild" >
<mx:Label id="lblCourseName" width="100%" text="Name" color="#ffffff" fontFamily="Arial" fontSize="14" fontWeight="bold" height="20" />
</mx:AddChild>
<mx:AddChild target="{screenToggle}" relativeTo="{lblCourseName}" position="after" />
<mx:AddChild relativeTo="message" position="before">
<mx:Spacer id="Bar" height="5" width="2" />
</mx:AddChild>
</state>
What would be the mistake here?
You might want to bind the relativeTo property value of the last AddChild object. Meaning, to write it like this:
<mx:AddChild relativeTo="{message}" position="before">
Assuming you have an element with that id.
Hope this helps.