I'm sure this is a common scenario. I have two ComboBoxes one for country and one for state. I'd like when the user choses US or Canada the state/province ComboBox's store is populated and it becomes required. For all other countries the state/province should not be required.

I've tried many combinations of using a custom validator on the state field, but it seems the validator is only triggered when allowBlank is set to false. If allowBlank is set to false, even when the validator function says its valid, the overall validation still says its not. Therefore, if the country is not US or Canada the form is still invalid with an empty state/province.

PHP Code:
{
    
fieldLabel'Country',
    
xtype'combo',
    
id'gframe_country_id',
    
storecountry_list,
    
hiddenName'country',
    
valueField'code',
    
displayField'name',
    
typeAheadtrue,
    
mode'local',
    
triggerAction'all',
    
emptyText:'Select a country...',
    
selectOnFocustrue,
    
forceSelectiontrue,
    
allowBlankfalse,
    
listeners: {
        
change: function(ffnew_valold_val){
            
Ext.getCmp('gframe_state_id').reset();
            
state_list.removeAll();
            
state_list.baseParams.country_code new_val;
            
state_list.load();
        }
    }
},{
    
fieldLabel'State/Province',
    
hiddenName'state',
    
xtype'combo',
    
id'gframe_state_id',
    
storestate_list,
    
valueField'code',
    
displayField'name',
    
typeAheadtrue,
    
mode'local',
    
triggerAction'all',
    
emptyText'Select a state/province...',
    
selectOnFocustrue,
    
forceSelectiontrue,
    
allowBlanktrue,
    
validator: function(state){
        if (
state_list.getCount() > && state.length 0)
        {
            return 
true;
        }

        return 
'State or Province is required for the chosen country';
    }

Can someone suggest another way to approach this problem. I'm embarrassed to say I'm running out of ideas.