Dinnamus

Seguinte gente boa, segue o problema:
Estou validando os valores de meus inputs, e só após todos os campos estarem válidos, meu submit "enviar" fica habilitado e muda o botão.
até aí tudo bem... O problema é o tal do "perder o foco" no campo para validar, pois se meu input submit está desabilitado, o campo que preenchi anterior nunca perde o foco! deve haver um jeito de fazer o input text perder o foco automático (campo.blur()) desde que esteja pronto, EU ACHO... algo como um onKeyUp(), mas isso deverá atrapalhar o desempenho de meu site... Bem, a dúvida está lançada e aguardo uma resposta de quem está nessa área a muito mais tempo do que eu...

segue uma parte do código que estou falando:

Função que valida o telefone

var e = 0;
function validaFone(campo5){
var tel = campo5.value;
tel = tel.replace(/[() -]/gi,"");
if(tel == ""){
e = 0;
document.getElementById("erro_FONE").style.display = "none";
return false;
}
var ddd = tel.substr(0,2);
var dd = tel.substr(2,2);
document.getElementById("erro_FONE").style.display = "none";
if ((ddd < 10) || (dd == 00)){
if(document.getElementById("erro_FONE").style.display == "none") {
document.getElementById("erro_FONE").style.display = "inline";
}
e = 0;
campo5.value = '';
return false;
}
e = 1;
mostra();
}

Função que decide se o submit será habilitado

function mostra(){
if (e == 1){
document.formulario.botao.disabled = false;
document.getElementById("erro_Botao").style.display = "none";
document.getElementById("botao").style.backgroundImage = "url(Images/botao.png)";
}
else{
document.formulario.botao.disabled = true;
document.getElementById("erro_Botao").style.display = "inline";
document.getElementById("botao").style.backgroundImage = "url(Images/botaoNone.png)";
}
}

Parte do código HTML
...
<fieldset>
<legend>FONE</legend>
<input type="text" onBlur="validaFone(this)" onkeypress="mascara(this,telefone)" maxlength="14" />
<span id="erro_FONE" style="display:none;font-size:10px;color:#FF0000"> Fone Inválido</span>
</fieldset>

<label id="fieldBotao">
<input type="submit" id="botao" name="botao" value="" onMouseOut="mostra()" disabled="true" style="background-image:url(Images/botaoNone.png)" />
</label>

<p align="center"><span id="erro_Botao" style="display:none;font-size:10px;color:#0066CC">Preencha Todos os Campos</span></p>
...

Espero que tenha conseguido passar a vocês qual a minha dificuldade. Confesso que ao colocar o código, me pareceu meio confuso, entretanto a função JS chamada no onMouseOut não funciona, pois mesmo tentando perder o foco do input text, clicando no botão, este está desativado e o foco continua no input text, não validando o campo e não habilitando o botão. (se o usuário clicar no TAB, ou clicar fora o botão será habilitado).

Obrigado pela atenção!

[Editado 10 horas depois]

Bem, uma solução que estou usando é a de validar após o usuario liberar a tecla, contando se o tamanho do valor está de acordo com o esperado para data de nascimento e telefone.

function validaFone(campo5){
var tel = campo5.value;
tel = tel.replace(/[() -]/gi,"");

if(tel == ""){
e = 0;
document.getElementById("erro_FONE").style.display = "none";
return false;
}
if ((tel.length) < 10){
return false;
}
[...]

[...]
<input type="text" onkeyup="validaFone(this)" onkeypress="mascara(this,telefone)" maxlength="14" />
<span id="erro_FONE" style="display:none;font-size:10px;color:#FF0000"> Fone Inválido</span>
[...]

onKeyUp() está validando os campos sem precisar perder o foco, e libera o botão mesmo se o usuario não clicar no TAB

Aew gente boa! foi em alguns tópicos do WebMasters que consegui criar os inputs personalizados! ficou muito bom!

A questão é quando o input está no foco, pois aparece uma borda laranja própria dos campos.

com a adição de pseudo-classes (input:focus, select:focus, textarea:focus) consegui retirar a borda laranja nos navegadores Firefox e IE.

Pena que no Chrome (como eu conceituava bem este aqui...) estas pseudo-classes não fazem nenhum efeito.

estou usando este CSS:
input {
border-top-width: 0px;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
width:260px;
height:28px;
background: none;
background-image: url(Images/form.png);
}

e aqui vai uns prints dos navegadores:

Show de bola essas funções que colocam máscara nos inputs, porém, quando eu uso a função que valida o CPF, as máscaras impedem que o resultado seja correto. alguém poderia informar uma função javascript que armazena somente os números de uma variável?