Flex Validation – Future Directions

I’m currently working on creating a small flex library with the goal of simplifying the task of implementing common user interface logic. One of the areas that is of particular interest to me is validation. Although the built in flex validators are useful they lack some important functionality needed to use them in any non trivial application.

In particular, the flex validators are quite narrowly focused on the validation of individual components like the text input or date chooser. While that’s great it limits our ability to easily validate an entire form or re-use our validators outside mxml.

In the Java world when you want to validate an object you implement a single method that executes the desired validation routines and collects the results.

public class PersonValidator implements Validator {
  public void validate(Object obj, Errors e) {
    ValidationUtils.rejectIfEmpty(e, "name", "name.empty");
    Person p = (Person) obj;
    if (p.getAge()  110) {
      e.rejectValue("age", "too.darn.old");
    }
  }
}

I think this is a great approach for three reasons:

1. You can use your validators everywhere, not just in the UI
2. Your validation routines are all grouped together in a single spot
3. You can easily unit test your validation

So naturally I’m interested in bringing something like this to the Flex world. Using a fluent builder pattern I think I am getting to a position where the validation process is becoming fairly straightforward e.g.

public class CustomerValidator implements Validator {

  public var blackList:ArrayCollection = new ArrayCollection(["a@a.com"]);

  public function validate(builder:ValidationBuilder, item:Object): void {
    var customer:Customer = Customer(item);
    builder.string(customer.name, "name").notEmpty().minLength(3);
    builder.number(customer.age, "age").between(0, 110);
    builder.string(customer.email, "email").validEmail().notIn(blackList);
  }
}

When writing a validator most of the heavy lifting is done by interacting with the builder:

public interface ValidationBuilder {
  function get routines(): ValidationRoutines;
  function get messages(): ValidationMessages;

  function addError(error:String, key:String=null);
  function hasErrors(): Boolean;

  function isNull(value:Object, key:String=null): ValidationBuilder;
  function isNotNull(value:Object, key:String=null): ValidationBuilder;

  function string(value:String, key:String=null) : StringValidationBuilder;
  function number(value:Number, key:String=null) : NumberValidationBuilder;
  function date(value:Date, key:String=null) : DateValidationBuilder;
}

You can easily use the the results of your validators in mxml using syntax similar to this…

<v:ValidationListener source="{validator}" target="{nameText}" key="name"/>
<v:ValidationListener source="{validator}" target="{ageText}" key="age"/>
<v:ValidationListener source="{validator}" target="{emailText}" key="email"/>

You’ll notice that several things are missing from this small overview including how you trigger validation and what happens with the results. The short story is that validation is just one component in the overall functionality required when editing objects.

I’m working on simple solutions to the overall problem but today I wanted to discuss how the validation side of things is shaping up.