Handle client and server validation with Flex 3?

Question

I'm a new grad, so please be kind. I'm working on validating input in a Flex DataGrid cell that the user can edit. The rows in the DataGrid are backed by an mx.collections.ArrayCollection that includes a [Bindable]Model that I wrote. I want to validate against a custom client-side Validator, if-and-only-if that passes I want to validate the input on the server. If client-side validation fails, I want to display the normal validation error (see image below). If server-side validation fails, I want to use the same sort of UI components to notify the user. The solution should not include any external framework (Cairngorm or PureMVC).

Standard Validator usage

My DataGrid implementation is:

<mx:DataGrid id="myPageGrid" dataProvider="{myModelList}" editable="true"
             itemEditEnd="verifyInputIsValid(event)">
    <mx:columns>
        <mx:DataGridColumn dataField="name" headerText="Name"
                           editable="false" />

        <mx:DataGridColumn dataField="fieldNeedingValidation" editable="true" 
                           id="fnv" headerText="Field Needing Validation" />

    </mx:columns>
</mx:DataGrid>

When a user edit's a cell, this function is called:

private function verifyInputIsValid(event:DataGridEvent):void
{
    // Check the reason for the event.
    if (event.reason == DataGridEventReason.CANCELLED)
    {
        return; // Do not update cell.
    }            

    // For the fieldNeedingValidation only
    if(event.dataField == "fieldNeedingValidation") {
        // Get the new data value from the editor.
        var newValue:String = TextInput(event.currentTarget.itemEditorInstance).text;
        var validatorResult:ValidationResultEvent = myValidator.validate(newValue);

        if(validatorResult.type==ValidationResultEvent.INVALID){
            // Prevent the user from removing focus,  and leave the cell editor open.  
            // Also, the edit will not continue and store the blank value
            event.preventDefault();
            // Write a message to the errorString property. 
            // This message appears when the user mouses over the editor.
            TextInput(myPageGrid.itemEditorInstance).errorString = validatorResult.message;
            return;                     
        }
        else if(validatorResult.type==ValidationResultEvent.VALID){
            // Assuming the data is valid on the Server, this is fine
            TextInput(myPageGrid.itemEditorInstance).errorString = "";
            TextInput(myPageGrid.itemEditorInstance).text = newValue;
            return;


            // I'd rather do this
            remoteObjectValidationService.validate(newValue);
            // Get a String result back from the call to the RemoteObject
            // Mark this "edit" (of the cell) as invalid, just as the client-side validator would

        }
    }
}

Of course, for this to work, the resultHandler of the remoteObjectValidationService would need to be invoked (and run) before we exit the verifyInputIsValid function. In a "synchronous" fashion. I know “All IO in Flex is asynchronous” , but there must be a standard way to do something like this right? I've already implemented my custom Validator and that works just fine.

How do Flex programmers validate on the server, immediately after the valid client-side validation passes?

I realize it seems silly to search out this "synchronous" design and I hope someone has an answer to solve my problem with best practices. In my defense, the reason I want to validate on the server immediately following client-side validation is so that I'm using Flex's validation framework. If I get an invalid response from the server, I want to leverage the built-in UI components that Flex has to tell the user something is incorrect about his/her input.

Any ideas?

drkstr drkstr · Accepted Answer · 2011-05-05T18:46:34

You can create a custom validator that calls a remote service. Just have the validator run any internal checks before making the call.

I wrote something like this a loooong time ago. It could certainly have been done better, but you may be able to pull a few ideas from it.

http://www.actionscript.org/forums/showthread.php3?t=173275

UPDATE

Here is a cleaner example of what something like this might look like.

package
{
    import flash.events.Event;
    import mx.rpc.AsyncToken;
    import mx.rpc.Responder;
    import mx.rpc.events.FaultEvent;
    import mx.rpc.events.ResultEvent;
    import mx.validators.Validator;

    public class UsernameValidator extends Validator
    {
        /**
         *
         */
        public function UsernameValidator()
        {
            super();
        }

        /**
         * Inject or create some kind of service delegate to process the remote check.
         */
        public var userNameService:IUserNameService;

        /**
         * Store the result of the remote check for the second pass through. 
         */     
        private var _nameCheckResult:int = 0;


        /**
         * Overide this method to start the validation process
         */
        override protected function doValidation(value:Object):Array
        {
            var userName:String = String(value);
            var invalidChars:RegExp = /\W+/;

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

            // Return if there are errors.
            if(results.length > 0)
                return results;

            // If input value is 0, or contains no value, 
            // issue a validation error.
            if(!userName)
            {
                results.push(new ValidationResult(true, null, "required", "No user name was entered. Please select a user name"));
            }
            else if(userName.match(invalidChars))
            {
                results.push(new ValidationResult(true, null, "invalidChars", "This user name contains non alphanumeric characters [a-zA-Z0-9_]. Please select another and try again."));
            }
            else if(_nameCheckResult == 1)
            {
                //well assume that 1 means it's bad
                results.push(new ValidationResult(true, null, "taken", "This user name has already been taken."));
            }
            else
            {
                //all checks have passed so return a special error type indicating a pending operation
                //the string identifier is meaningless, except to indicate that it should be handled
                //differencly by the consumer of the validation
                results.push(new ValidationResult(true, null, "validating", "Checking username availability."));

                //call some kind of remote service

                var token:AsyncToken = this.userNameService.checkAvailability(userName);
                token.addResponder(new Responder(userNameService_resultHandler, userNameService_faultHandler));

                    //...you should also add some logic to handle a change to the input if you want to use "live validation"
            }

            return results;
        }

        /**
         * Dispatch some kind of event indicating an error (preferably with some return codes)
         */
        private function userNameService_faultHandler(event:FaultEvent):void
        {
            trace("UserNameValidator.handleNameCheckError");

            dispatchEvent(new Event("error"));
        }

        /**
         * Check the result and dispatch an event indicating the validation needs to be run again.
         */
        private function userNameService_resultHandler(event:ResultEvent):void
        {
            trace("userNameService_resultHandler(event)");

            _nameCheckResult = event.result as int;

            this.dispatchEvent(new Event("complete"));
        }
    }
}

package
{
    import mx.rpc.AsyncToken;

    /**
     * The interface to a service delegate that checks
     * the username and returns an AsyncToken.
     */
    public interface IUserNameService
    {
        function checkAvailability(userName:String):AsyncToken
    }
}

The idea is to essentially run the validater twice. Once when the initial check is done, then again when the validator as received an appropriate return code for the asynchronous operation. How you do this depends on how you are handling validation events in your app.

Handle client and server validation with Flex 3?

3 Answers

MyPage.mxml

UserValidator.as

UserRemoteObjectService.as