JavaScript validation error with JSF

Next, I found a javaScript file on the web with lists of Brazilian states and cities. I tried playing it here in my code, but I do not understand much of javaScript.

Can you tell where the error comes from?

javaScript file:

/**
* Originalmente escrito por DGmike  
* http://code.google.com/p/cidades-estados-js/
*/

/* Dom Ready */

window.onDomReady = function dgDomReady(fn){
   if(document.addEventListener)    //W3C
       document.addEventListener("DOMContentLoaded", fn, false);
   else //IE
       document.onreadystatechange = function(){dgReadyState(fn);};
};

function dgReadyState(fn){ //dom is ready for interaction (IE)
   if(document.readyState === "interactive") fn();
}

/* Objeto */ 
var dgCidadesEstados = function(data) {
   var defaultData = {
       estado: false,
       estadoVal: '',
       cidade: false,
       cidadeVal: '',
       change: false
   };
   for (name in defaultData) {
       if (!data[name]) {
          data[name] = defaultData[name];
       }
   }
   var keys = ['estado', 'cidade'];
   if (data['change']) { //caso change: true, não se trata de um select a ser povoado
    var nome, length = keys.length;
    for (var a=0; a<length; a++ ) {
        nome = keys[a];
        if (data[nome].tagName) {
            var opt = document.createElement('select');
            opt.disabled = null;
            for (var i = 0; i < data[nome].attributes.length ; i++) {
                var attr = data[nome].attributes[i];
                if (attr.name !== 'type') {
                    opt.setAttribute(attr.name, attr.value);
                }
            }
            opt.size=1;
            opt.disabled=false;
            data[nome].parentNode.replaceChild(opt, data[nome]);
            data[nome] = opt;
        }
    }
}
this.set(data['estado'], data['cidade']);
this.start();

var nome, length = keys.length;
for (var i=0; i<length; i++) {
    nome = keys[i]; //estado e cidade

    if (this[nome].getAttribute('value')) {
        data[nome+'Val'] = this[nome].getAttribute('value');
    }

    if (data[nome+'Val']) { //preenche estadoVal e cidadeVal se fornecidos na criação do dgCidadesEstados.
        var options = this[nome].options;
        if (nome==='estado') this.estado.onchange(); //se tiver preenchido o estado, dá run() pra preencher as cidades
        for (var j = 0; j<options.length; j++) { //olha cada linha e vê se é a que quer... aí coloca como selected.
            if (options[j].tagName === 'OPTION') {
                if (options[j].value === data[nome+'Val']) {
                    options[j].setAttribute('selected',true);
                    if (nome==='estado'){ //esses dois passos são necessários pro IE6!
                        this.estado.selectedIndex=j;
                        this.estado.onchange();
                    }
                }
            }
        }
    }

}

};

dgCidadesEstados.prototype = {
   estado: document.createElement('select'),
   cidade: document.createElement('select'),
   set: function(estado, cidade) { //define os elementos DOM a serem preenchidos
    this.estado=estado;
    this.estado.dgCidadesEstados=this;
    this.cidade=cidade;
    this.estado.onchange=function(){this.dgCidadesEstados.run();};
},
start: function () { //preenche os estados
    var estado = this.estado;
    while (estado.childNodes.length) estado.removeChild(estado.firstChild);
    for (var i=0;i<this.estados.length;i++) this.addOption(estado, this.estados[i][0], this.estados[i][1]);
},
run: function () { //preenche as cidades de acordo com o estado escolhido
    var sel = this.estado.selectedIndex; // estado escolhido
    var itens = this.cidades[sel]; // pega as cidades correspondentes
    var itens_total = itens.length;

    var opts = this.cidade;
    while (opts.childNodes.length) opts.removeChild(opts.firstChild); // limpa a lista atual

    this.addOption(opts, '', 'Selecione uma cidade');
    for (var i=0;i<itens_total;i++) this.addOption(opts, itens[i][0], itens[i][1]); // vai adicionando as cidades correspondentes
  },
addOption: function (elm, val, text) {
    var opt = document.createElement('option');
    opt.appendChild(document.createTextNode(text));
    opt.value = val;
    elm.appendChild(opt);
},
estados : [
    ['','Selecione um estado'],['AC','Acre'],['AL','Alagoas'],['AM','Amazonas'],['AP','Amapá'],['BA','Bahia'],
    ['CE','Ceará'],['DF','Distrito Federal'],['ES','Espírito Santo'],['GO','Goiás'],['MA','Maranhão'],['MG','Minas Gerais'],
    ['MS','Mato Grosso do Sul'],['MT','Mato Grosso'],['PA','Pará'],['PB','Paraíba'],['PE','Pernambuco'],['PI','Piauí'],
    ['PR','Paraná'],['RJ','Rio de Janeiro'],['RN','Rio Grande do Norte'],['RO','Rondônia'],['RR','Roraima'],['RS','Rio Grande do Sul'],
    ['SC','Santa Catarina'],['SE','Sergipe'],['SP','São Paulo'],['TO','Tocantins']
],
cidades : [
    [''],
    [[1200013,"Acrelândia"],[1200054,"Assis Brasil"],[1722107,"Xambioá"]] // Reduzi a lista pra não ficar extenso
]
};

No hxml:

   <h:selectOneMenu id="estado" value="#{alunoBean.endereco.estado}"></h:selectOneMenu>
   <h:selectOneMenu id="cidade" value="#{alunoBean.endereco.cidade}"></h:selectOneMenu>

Class Address:

public class Endereco implements Serializable {
    private String cidade;
    private String estado;
    // Getters e Setters
}

The error that appears says the following:

estado: Erro de validação: o valor não é válido
cidade: Erro de validação: o valor não é válido