Using the validator in Flex

I’ve been working with the StringValidator, and EmailValidator, and I’ve even worked with some regex validation in Flex.

Adobe has a great quickstart guide to using the validators, which I recommend to anyone as a starting point. At the end of that page you will find a very long mxml page, that seems like a lot of work just to do validation, when I tend to ask myself, “I thought this stuff was supposed to be easy in flex?” and it was a little bit of a challenge working with the Validator class… and deciding how things should work, and deciding the right way of going about doing things.

CLICK HERE FOR THE ORIGINAL ADOBE QUICK START FOR VALIDATING FORM FIELDS IN FLEX

If you use the mx:StringValidator you bind it’s source to a form field… I was confused by this because in the post, the very long post at the bottom validates the form on every form field change… the nice thing about this, is that it’s client side so it’s really fast, you would think making these calls would be overkill in web 1.0, but it’s not in flex… it fits the situation perfectly.

So the hierarchy of the form is this

formfields: -stateName (maxLength=”2″) -emailAddress -password -confirmPassword

with associative validators bound to each of the form fields mx:StringValidators -stateValidator (min=”2″ max=”2″, verifies 2 character entry) -passwordValidator (min=”5″ max=”15″, no complex validation) -confirmPasswordValidator mx:EmailValidator -emailValidator

What I added that the post didn’t have was the confirmation of the password, with this type of hierarchy.

I could see that the confirmPassword field was getting validated, it had 5 characters and was below 15 characters, but I needed it to match the password.text field…

How was I going to accomplish this?

I created a private variable that was available to the whole component called “cPasswordIsValid”

private var cPasswordIsValid:Boolean = false;

in the validateForm() function make sure to add the line

validate(confirmPasswordValidator)

by doing this, it insures that all of your validation is left up to the validate() function, it creates a single place to do things, or add some custom functionality.

Within the validate() function replace the current formIsValid = line with the following.

cPasswordIsValid = confirmFormIsValid();

// Update the formIsValid flag formIsValid = formIsValid &&

currentControlIsValid &&

cPasswordIsValid;

Now add the function confirmFormIsValid:Boolean within the mx:Script tag.

//this is the function that will test both

//if the form is valid, and if the password //matches the first one private function confirmFormIsValid():Boolean{

var result:Boolean = false;

if(password.text != “” && confirmPassword.text != “”){

if(password.text == confirmPassword.text){

cPasswordIsValid = true;

result=true;

}else{

result=false;

}

}

return result;

}

What this did, was allowed us to have a spot holder to check for the password.text, to equal the confirmPassword.text or vica versa…

Please feel free to look at the example and pick apart the code yourself.

CLICK HERE TO SEE THE EXAMPLE AND GET THE CODE

2 comments on this post.
  1. allereeBeni:

    Заказать проверенную базу каталогов сайтов.

    База каталогов сайтов

  2. Fry1978:

    Вот так новость. Казалось бы причем тут Лжуков? Привет из МосквыСории а кто котят продает

Leave a comment