Anish
Anish

Reputation: 768

How can we use Compare validator in flex

Is there a compare validator in Flex? I searched but couldn't able to find it. Is there any validator like compare validator ?

My example is how to check whether the password and confirm password is same using flex validator

<s:TextInput id="password" width="218" textAlign="left" contentBackgroundColor="#FFFFFF"/>
<s:TextInput id="confirmpassword" width="218" textAlign="left" contentBackgroundColor="#FFFFFF"/> 

Upvotes: 1

Views: 750

Answers (1)

Adrian Pirvulescu
Adrian Pirvulescu

Reputation: 4340

Having the following 2 email fields, for first we define a standard email validator and for the confirmation we define a custom email validator attached at the end of the answer.

<mx:HBox
    verticalAlign   = "middle"
    color           = "#101010">
    <mx:Label
        text        = "E-Mail Address:"
        width       = "120"/>
    <mx:TextInput
        id          = "txtEmail"
        width       = "220"/>
</mx:HBox>
<mx:HBox
    verticalAlign   = "middle"
    color           = "#101010">
    <mx:Text
        text        = "Rewrite E-Mail Address:"
        width       = "120"/>
    <mx:TextInput
        id          = "txtEmail2"
        width       = "220"/>
</mx:HBox> 

Now we add the validators

<mx:EmailValidator
    id              = "valEmail"
    required        = "true"
    source          = "{txtEmail}"
    property        = "text"
    invalidCharError            = "Invalid format"
    invalidDomainError          = "Invalid format"
    invalidIPDomainError        = "Invalid format"
    invalidPeriodsInDomainError = "Invalid format"
    missingAtSignError          = "Invalid format"
    missingPeriodInDomainError  = "Invalid format"
    missingUsernameError        = "Invalid format"
    />

<validators:EmailConfirmationValidator
    id              = "valEmail2"
    required        = "true"
    source          = "{txtEmail2}"
    property        = "text"
    confirmationSource  = "{txtEmail}"
    confirmationProperty= "text"/>

And separately we need to define the EmailConfirmationValidator class which I have declared inside a "validators" package

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

public class EmailConfirmationValidator extends Validator
{
    public var confirmationSource: Object;
    public var confirmationProperty: String;

    public function EmailConfirmationValidator()
    {
        super();
    }

    // Define the doValidation() method.
    override protected function doValidation(value:Object):Array 
    {
        // Call base class doValidation().
        var results:Array = super.doValidation(value);

        if (value.text != value.confirmation)
        {
            results.push(new ValidationResult(true, null, "Mismatch",
                "Emails do not match!"));
        }

        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.text = super.getValueFromSource();

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

        return  value;
    }  


}
}

In case you need to manually check the validators in your form. For example when before submitting the content for registration, use the following method

public function isValid():Boolean
{
var validators:Array            = [valEmail, valEmail2];
    var validatorErrorArray:Array   = Validator.validateAll(validators);;
var isValidForm:Boolean         = validatorErrorArray.length == 0;

    return isValidForm;
}

Upvotes: 2

Related Questions