Flex : how to change states in a Login form after the validation is valid?

Question

I have a simple login form where the user enters the userSAP no(must be number) and password(min 8 chars).I have done validation for each fields. I want to check if the validation passes first before it changes the state from LoginMode_Default to PerviewMode state. After the user logs in, it shows a welcome msg to the user.

In my codes when the user clicks login button, I call the validateLogin() function to check if the fields are valid.If the are valid set the currentState to PerviewMode state.

In the PerviewMode the user can click logout, which calls the logoff() function to go back to the LoginMode_Default state.

However when I click logout link, it goes back to the login form, but the userId and password fields are outlined red. How can i go back to login form without the fields getting outlined red ? I am doing it correctly ? Is there a better or correct way to do this ? Pls can someome help me with this ? Thanks:)

My Validation codes

    <fx:Declarations>       
    <s:NumberValidator id="userSAPValidator" 
                       property="text" 
                       required="true"
                       domain="int"
                       notAnIntegerError="Should not conatin any decimal"
                       allowNegative="false"
                       negativeError="Should not contain negative values"
                       parseError="Enter only numbers without space"
                       source="{userSAP_field}"/>   

    <mx:StringValidator id="userPasswordValidator"                          
                        property="text"                                                     
                        required="true"                         
                        minLength="8"                           
                        tooShortError="password must at least be 8 characters"
                        source="{userPassword_field}"/>         
</fx:Declarations>

My states in MXML:

<s:states> 
    <s:State name="LoginMode_Default"/> 
    <s:State name="PerviewMode"/>   
</s:states> 

My login form MXML :

     <s:BorderContainer id="login_BC" x="1" y="1" width="223" height="134"
                           x.LoginMode_Default="2" y.LoginMode_Default="9"
                           height.LoginMode_Default="152" height.PerviewMode="40">


               <s:Form id="loginForm" x="5" y="7" width="212" height="133"
                    x.LoginMode_Default="4" y.LoginMode_Default="5" excludeFrom="PerviewMode">  
                   <s:layout>
                       <s:BasicLayout/>
                   </s:layout>                 
                   <s:Label x="0" y="14" width="52" height="18" text="SAP no :" paddingTop="5"/>                           
                   <s:TextInput id="userSAP_field" x="74" y="10" width="108"/>
                   <s:Label x="0" y="52" text="Password :" paddingTop="5"/> 
                   <s:TextInput id="userPassword_field" x="73" y="48" width="109" height="21" displayAsPassword="true"/>                       
                <s:Button id="loginButton" x="6" y="82" label="Login" click="validateLogin()" />                          
            </s:Form>

            <s:HGroup includeIn="PerviewMode" width="245" height="41">
                <s:Label id="welcome_text" text="Welome your name" paddingTop="12"  paddingLeft="10"/>
                <mx:LinkButton label="logout" click="logOff()" paddingTop="6"/>                 
            </s:HGroup> 

        </s:BorderContainer>

My validateLogin function :

private function validateLogin():void {

var vResult1:ValidationResultEvent;
var vResult2:ValidationResultEvent;

vResult1 = userPasswordValidator.validate();
vResult2 = userSAPValidator.validate();

if (vResult1.type==ValidationResultEvent.VALID && vResult2.type == ValidationResultEvent.VALID ) {      
    this.currentState = "PerviewMode";

}
else{       
    this.currentState = "LoginMode_Default";        
}

}

My logOff function:

private function logOff():void {
this.currentState = "LoginMode_Default";
userPassword_field.text ="";
userSAP_field.text =""; 

}

Answer 1

Try adding

userSAP_field.errorString = '';
userPassword_field.errorString = '';

to your logOff() function.

Answer 2

When you change textinput text, validator checks value. Try to turn off required option and then clear textinput:

private function logOff():void {
        this.currentState = "LoginMode_Default";

        userSAPValidator.required = false;
        userPasswordValidator.required = false;

        userSAP_field.text =""; 
        userPassword_field.text ="";

        userSAPValidator.required = true;
        userPasswordValidator.required = true;
}