Flex: How do you validate 2 password fields to make sure they match?

Question

I want to use a validator to ensure 2 password fields match in Flex. I want the validator to highlight form fields like a normal flex validation control. Thanks.

Answer 1

enter code hereI created my own custom validator (mostly copied from date validator):

package validators
{
    import mx.validators.ValidationResult;
    import mx.validators.Validator;

    public class PasswordValidator extends Validator
    {
        // Define Array for the return value of doValidation().
        private var results:Array;

        public function PasswordValidator()
        {
            super();
        }

        public var confirmationSource: Object;
        public var confirmationProperty: String;

        // Define the doValidation() method.
        override protected function doValidation(value:Object):Array {

            // Call base class doValidation().
            var results:Array = super.doValidation(value.password);

            if (value.password != value.confirmation) {
                results.push(new ValidationResult(true, null, "Mismatch",
                "Password Dosen't match Retype!"));

            }

            return results;
        }       

        /**
         *  @private
         *  Grabs the data for the confirmation password from its different sources
         *  if its there and bundles it to be processed by the doValidation routine.
         */
        override protected function getValueFromSource():Object
        {
            var value:Object = {};

            value.password = super.getValueFromSource();

            if (confirmationSource && confirmationProperty)
            {
                value.confirmation = confirmationSource[confirmationProperty];
            }

            return  value;
        }       

    }
}

the example mxml for using:

<validators:PasswordValidator id="pwvPasswords" required="true" source="{txtPassword}" property="text" confirmationSource="{txtPasswordConfirm}" confirmationProperty="text" trigger="{btnStep2Finish}" />

It's pretty basic, but it's mostly what I need. It only highlights the password box though, would like to get it to highlight both.

Answer 2

Here's a better custom validator that's more universal, clean, and works well with the 'required' field.

 import mx.validators.ValidationResult;
 import mx.validators.Validator;

 public class MatchValidator extends Validator{
  private var _matchSource: Object = null;
  private var _matchProperty: String = null;
  private var _noMatchError: String = "Fields did not match";

  [Inspectable(category="General", defaultValue="Fields did not match")]
  public function set noMatchError( argError:String):void{
   _noMatchError = argError;
  }
  public function get noMatchError():String{
   return _noMatchError;
  }

  [Inspectable(category="General", defaultValue="null")]
  public function set matchSource( argObject:Object):void{
   _matchSource = argObject;
  }
  public function get matchSource():Object{
   return _matchSource;
  }

  [Inspectable(category="General", defaultValue="null")]
  public function set matchProperty( argProperty:String):void{
   _matchProperty = argProperty;
  }
  public function get matchProperty():String{
   return _matchProperty;
  }


  override protected function doValidation(value:Object):Array {

   // Call base class doValidation().
   var results:Array = super.doValidation(value.ours);

   var val:String = value.ours ? String(value.ours) : "";
   if (results.length > 0 || ((val.length == 0) && !required)){
    return results;
   }else{
    if(val != value.toMatch){
     results.length = 0;
     results.push( new ValidationResult(true,null,"mismatch",_noMatchError));
     return results;
    }else{
     return results;
    }
   }
  }  

  override protected function getValueFromSource():Object {
   var value:Object = {};

   value.ours = super.getValueFromSource();

   if (_matchSource && _matchProperty){
    value.toMatch = _matchSource[_matchProperty];
   }else{
    value.toMatch = null;
   }
   return value;
  }
 }

Here's an example:

<components:MatchValidator source="{passwordCheckField}" property="text" matchSource="{passwordField}" matchProperty="text"
    valid="passwordsMatch = true" invalid="passwordsMatch = false" noMatchError="Passwords do not match"/>