Validação de Form campo a campo

Front-end
#1

Olá pessoal, tudo bem? É o seguinte, preciso validar um formulário campo à campo, ou seja, assim que a pessoa mudar de campo, esse campo deve ser validado. Quanto a campo obrigatório, eu consegui, mas preciso agora verificar após a pessoa ter digitado o código, se esse código já existe ou não. Alguém pode me ajudar?

A seguir está meu form e minha função java script:

<a4j:form id="formAddEndossos" reRender="formAddEndossos" prependId="false"> <center> <h:messages id="msg" style="color: red; list-style: none; padding: 0px;" /> <rich:message for="campoCod" id="msgCod" style="color: red" /> <rich:message for="campoDesc" id="msgDesc" style="color: red" /> <br/><br/> <h:panelGrid columns="1"> <a4j:region id="regCod"> <h:outputText id="textoCod" value="Codigo: "/> <h:inputText id="campoCod" value="#{endossoMB.endosso.codigo}" maxlength="3" required="true" requiredMessage="Campo Obrigatorio"> <a4j:support event="onblur" onsubmit="validaCampoCod();" reRender="msgCod" /> </h:inputText> </a4j:region> <a4j:region id="regDesc"> <h:outputText id="textoDesc" value="Descricao: "/> <h:inputTextarea id="campoDesc" value="#{endossoMB.endosso.descricao}" style="height:50px;" onkeydown="caracteres(this);" onkeyup="caracteres(this);" required="true" requiredMessage="Campo Obrigatorio"> <a4j:support event="onblur" onsubmit="validaCampoDesc();" reRender="msgDesc" /> </h:inputTextarea> </a4j:region> </h:panelGrid><br/> <a4j:commandButton value="Cancelar" action="sucesso" immediate="true" /> <a4j:commandButton value="#{endossoMB.nomeBotao}" action="#{endossoMB.actionEditaEndosso}" requestDelay="1000" reRender="msg" /> <br/> </center> </a4j:form>

[code]function caracteres(objeto) {
var limite = 160;
tamanho = objeto.value.length;

if (tamanho>limite) {
    objeto.value = objeto.value.substring(0,limite);
}

}

function validaCampoCod() {
var cor = “red”;
var corDefault = “black”;
var empty = “Campo Obrigatorio”;

document.getElementById("msgCod").innerHTML = "";
document.getElementById("msgDesc").innerHTML = "";
document.getElementById("textoCod").style.color = corDefault;
document.getElementById("textoDesc").style.color = corDefault;

if(document.getElementById("campoCod").value == "") {
    document.getElementById("textoCod").style.color = cor;
    document.getElementById("msgCod").innerHTML = empty;
}

}

function validaCampoDesc() {
var cor = “red”;
var corDefault = “black”;
var empty = “Campo Obrigatorio”;
var recebeuValor = false;

document.getElementById("msgCod").innerHTML = "";
document.getElementById("msgDesc").innerHTML = "";
document.getElementById("textoCod").style.color = corDefault;
document.getElementById("textoDesc").style.color = corDefault;

if(document.getElementById("campoCod").value == "") {
    document.getElementById("textoCod").style.color = cor;
    document.getElementById("msgCod").innerHTML = empty;
    document.getElementById("msgCod").style.color = cor;
    recebeuValor = true;
}
if(document.getElementById("campoDesc").value == "") {
    document.getElementById("textoDesc").style.color = cor;
    if(!recebeuValor) {
        document.getElementById("msgCod").innerHTML = empty;
    }
}

}
[/code]

Desde já, obrigado.

#2

Dá uma olhada no atributo validator das tags, é mais facil e prético que fazer por javascript

#3