Sunday, June 7, 2009

Flex - Custom Date Validation

Generally, Date validation is not required in Flex because direct entry of date is restricted in DateField and provided through calendar pick box. However, in some cases where developer want to provide search functionality between dates and duration could be in many years suppose 20 or more year. yearNavigationEnabled property does provide direct navigation through instead of month but still in cases of many years, user need to click n times to change dates for n years years, for 20 years 20 clicks that could be annoying.

Solution to this problem is to make enable property 'true' for editing date field direct as input. However, the direct entry in input field raises possibilities of wrong date entry. As client-side validation is key strength of Flex.

Here, I'm trying to cover active date validation of custom date input datefield. Flex validation highlights the field highlighted in Red and developer can add custom validation for alert messages.

Please follow these steps to
1. First add editable="true" in custom DataField

mx:DateField editable="true" showToday="true" id="customDateWithValidation"

2. Add Flex Date Validation
mx:DateValidator source="{customDateWithValidation}" property="text" allowedFormatChars="/" trigger="{customDateWithValidation}" triggerEvent="valueCommit" id="validateCustomDate"

This much will activate the Flex validation and highlight the input field in case of error in Red with error as dataTip.

3. In case developer want to add custom validation, add event with DataField


4. In custom validation method call the alert based on validity of input
protected function validateDate(event:CalendarLayoutChangeEvent):void{
var customDateEvent :ValidationResultEvent = validateCustomDate.validate();
if(customDateEvent.type==ValidationResultEvent.INVALID){
Alert.show("Date must be in MM/DD/YYYY format.");
return;
}
}

All this will help developer to achieve Active Validation. However, I'm thinking in lines of passive validation. In this case, user will enter character accidentally only and its known to user dates can be numeric only and system can ignore passively other character apart from number while entering input itself. I will try to code for passive validation in my next blog.

No comments:

Post a Comment