Estou trabalhando em um formulário o qual se a pessoa não preencher os campos, o <input>
fica com uma borda vermelha, e em baixo aparece o nome "Campo obrigatório".
Está funcionando tudo bem, porém preciso que quando a pessoa preencher o campo ele volte ao seu estado normal, sem borda vermelha e sem o nome que é inserido "Campo obrigatório". Pois ele aparece, mas não some depois de preenchido!
Antes
Depois - Errado
Depois - Como deve ficar
O
<form>
está da seguinte forma:
<form class="form-horizontal" id="formulario" name="formulario" method="get"
action="http://localhost/br/p/124678139/" onsubmit="return valida_form(this)"></form>
Meu código Javascript:
function valida_form (){
if(document.getElementById("nome").value.length < 3){
document.getElementById("nome").focus();
document.getElementById("nome").style.border = "1px solid #ef3c59";
document.getElementById("textinho").innerHTML='<p class="help-block ng-binding" style="color:#ef3c59;">Campo obrigatório</p>';
return false
}
}
Também necessito fazer funcionar no campo de e-mail, no qual utilizo o seguinte código:
function valida_form (){
var filter = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(!filter.test(document.getElementById("emaile").value)){
document.getElementById("emaile").focus();
document.getElementById("emaile").style.border = "1px solid #ef3c59";
document.getElementById("textinho2").innerHTML='<p class="help-block ng-binding" style="color:#ef3c59;">E-mail inválido</p>';
return false
}
}