Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Prove Yourself

[Resolvido] Validar formulário sem ser redundante

Por , em Javascript

Recommended Posts

Prove Yourself    0

Prove Yourself
Postado

Criei um código para validar um formulário mas ele está meio redundante. Quando o usuário sai de um campo, este é validado com o seguinte código

function validarCampo(campo) {
	if(campo.value == '') {
		campo.focus();
		campo.style.border = '2px solid #ff0000';
	} else {
		campo.style.border = '1px solid #5fc6ff';
	}

	return false;
}
Quando o usuário submete, todos os campos são validados novamente com o seguinte código
function validarFormulario() {
    var formulario_valido = true;
    
    if(document.getElementById('nome').value == '') {
        document.getElementById('aviso').style.display = 'block';
        document.getElementById('nome').style.border = '2px solid #ff0000';
        formulario_valido = false;
    }
    
    if(document.getElementById('telefone').value == '') {
        document.getElementById('aviso').style.display = 'block';
        document.getElementById('telefone').style.border = '2px solid #ff0000';
        formulario_valido = false;
    }
    
    if(document.getElementById('email').value == '') {
        document.getElementById('aviso').style.display = 'block';
        document.getElementById('email').style.border = '2px solid #ff0000';
        formulario_valido = false;
    }
    
    if(document.getElementById('cidade').value == '') {
        document.getElementById('aviso').style.display = 'block';
        document.getElementById('cidade').style.border = '2px solid #ff0000';
        formulario_valido = false;
    }

    if(!document.getElementById('masculino').checked && !document.getElementById('feminino').checked) {
        document.getElementById('sexo').style.color = '#ff0000';
        document.getElementById('sexo').style.fontWeight = 'bold';
        document.getElementById('sexo').style.textDecoration = 'underline';
        
        document.getElementById('aviso').style.display = 'block';
        formulario_valido = false;
    }
    
    if(document.getElementById('fc').value == '') {
        document.getElementById('aviso').style.display = 'block';
        document.getElementById('fc').style.border = '2px solid #ff0000';
        formulario_valido = false;
    }
    
    return formulario_valido;
}
ou seja, criei duas funções para validar o form. A coisa ficou meio redundante já que valido duas vezes os campos em duas funções. Existe uma forma melhor de fazer isso? Como?

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Jonathan Queiroz    1

Jonathan Queiroz
Postado

Tente assim:

function validarCampo(campo) {
  if(campo.value == "") {
    campo.focus();
    campo.style.border = '2px solid #ff0000';
    return false
  }
  campo.style.border = '1px solid #5fc6ff';
  return true
}
function validarFormulario() {
    var campos=new Array("nome","telefone","email","cidade","fc")
    var formulario_valido = true;
    var i
    var campo
    for(var i=0;i<campos.length;i++){
      if(!validarCampo(document.getElementById(campos[i]))){
        formulario_valido=false
        document.getElementById('aviso').style.display = "block"
      }
    }
    if(!document.getElementById('masculino').checked && !document.getElementById('feminino').checked) {
        document.getElementById('sexo').style.color = '#ff0000';
        document.getElementById('sexo').style.fontWeight = 'bold';
        document.getElementById('sexo').style.textDecoration = 'underline';
        
        document.getElementById('aviso').style.display = 'block';
        formulario_valido = false;
    }
    
    return formulario_valido;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Você também pode tentar assim:

 

<html>
<head>
	<title>Testar envio de formulário</title>
<script type="text/javascript">
//Definindo status de campos que ainda não foram validados;
var nome = false;
var email = false;
var cpf = false;
var telefone = false;
var campoAtual;

function validaCampo(campo) {
var objCampo = document.getElementById(campo);

	if (campo == "nome") {
	campoAtual = objCampo;
		if (campoAtual.value.length == 0) {
			alert("O campo nome está vazio.");
			campoAtual.focus();
		} else {
			nome = true;
		}
	}
	
	if (campo == "email") {
	 campoAtual = objCampo;
		if (campoAtual.value.length == 0) {
			alert("O campo e-mail está vazio.");
			campoAtual.focus();
		} else {
			email = true;
		}
	}
	
	if (campo == "cpf") {
	 campoAtual = objCampo;
		if (campoAtual.value.length == 0) {
			alert("O campo cpf está vazio.");
			campoAtual.focus();
		} else {
			cpf = true;
		}
	}
	
	if (campo == "telefone") {
	 campoAtual = objCampo;
		if (campoAtual.value.length == 0) {
			alert("O campo telefone está vazio.");
			campoAtual.focus();
		} else {
			telefone = true;
		}
	}
}

function validaForm() {
	if (nome && email && cpf && telefone) {
		return true;
	} else {
	 	alert("Ocorreram erros no seu formulário!");
		return false;
	}
}
</script>

</head>
<body>

<form name="form1" action="pagina.php" method="post" onsubmit="javascript: return validaForm()">
Nome: <input type="text" name="nome" id="nome" onblur='validaCampo("nome")'>
<br>E-mail: <input type="text" name="email" id="email" onblur='validaCampo("email")'>
<br>CPF: <input type="text" name="cpf" id="cpf" onblur='validaCampo("cpf")'>
<br>Telefone: <input type="text" name="telefone" id="telefone" onblur='validaCampo("telefone")'>
<br><br><input type="submit" value="enviar">
</form>
</body>
</html>
Nesse caso, a validação de cada campo ocorre sempre que o evento onblur é chamado. Se o campo passar pela validação, ele recebe um valor "true". No final, avalia-se se todos os campos receberam o valor "true", sem a necessidade de ter de validá-los novamente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

Globais não podem se tornar um problema sério?

 

Podem sim, principalmente em códigos extensos. Mas como trata-se apenas de validação de um formulário, creio que não terá maiores problemas, pois são poucas as variáveis que você irá utilizar, em um código que utiliza muito poucas linhas.

Se ocorrer algum problema, fica mais fácil trabalhar com a variável "problemática", ajustando-a.

 

Repito: Nesse caso, será muito difícil ocorrer um problema!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito