Nesse post irei explicar como verificar se um campo em um formulário está vazio. Geralmente a validação de formulários é realizado via JavaScript. O JavaScript realiza a verificação diretamente no browser, evitando o envio de dados “sujos”.
No exemplo irei realizar a verificação do campo ID “nome”, porém você pode aplicar em qualquer outro campo.
Criando o formulário:
<form id="form1" name="form1" method="post" action="#" onsubmit="return valida_form(this)"> <label for="nome"></label> <input name="nome" type="text" id="nome" size="35" /> </form>
Verificando se o campo “nome” está vazio via JavaScript:
<script type="text/javascript" language="javascript">
function valida_form (){
if(document.getElementById("nome").value.length < 3){
alert('Por favor, preencha o campo nome');
document.getElementById("nome").focus();
return false
}
}
</script>
Você pode fazer a verificação também dessa forma:
<script type="text/javascript" language="javascript">
function valida_form (){
if(document.getElementById("nome").value == ""){
alert('Por favor, preencha o campo nome');
document.getElementById("nome").focus();
return false
}
}
</script>
Entendendo o código:
function valida_form – Aqui eu crio a função
if(document.getElementById(“nome”).value.length < 3) – Verifica se no documento, o valor do elemento cujo ID é “nome” for menor que 3.
alert(‘Por favor, preencha o campo nome’); – Se for menor que 3 mostra mensagem de erro
document.getElementById(“nome”).focus() – Volta o cursor para o ID “nome”
Você pode adaptar e usar essa verificação em qualquer outro campo, por exemplo:
Verificando se o campo telefone esta vazio:
Sabemos que o campo telefone precisa ter pelo menos 10 caracteres, então, nesse caso, você altera o “length < 3” para “length < 10”
Outra forma de verificar:
Nesse outro exemplo, verificamos se o campo é nulo ou vazio, com a seguinte sintaxe: if (x==null || x==””).
/*função valida campo*/
function valida_form()
{
var x=document.forms["myForm"]["fname"].value;
if (x==null || x=="")
{
alert("Primeiro nome deve ser preenchido");
return false;
}
return true;
}
E quando há mais de um campo ?
Se forem campos diferentes você cria um if para cada campo, por exemplo:
Digamos que você queira verificar os campos nome e telefone, ficaria assim:
if(document.getElementById(“nome”).value == “”){
alert(‘Por favor, preencha o campo nome’);
document.getElementById(“nome”).focus();
return false
}
if(document.getElementById(“telefone”).value == “”){
alert(‘Por favor, preencha o campo nome’);
document.getElementById(“nome”).focus();
return false
}
Obrigado pela dica mas está a gerar um probleminha.
Quando clicar no botão submit ele mostra a mensagem mas depois avança com a action.
Como faço para impedir que ele avance com a action?
Sei que o post já é antigo, mas talvez eu ainda ajude alguém.
Eu faço assim:
Eu uso o operador booleano “ou” (| |), tipo assim:
if (entrada1.value == ” ” | | entrada2.value == ” ” | | entrada3.value == ” “) {
alert(‘Por favor, preencha todos os dados antes de continuar’)
}
Assim eu não preciso digitar um if para cada caso desse.
Espero ter ajudado 🙂
Obrigada pelas dicas! ?Simples e objetivo.
eu tenho o seguinte formulario porem a validaçao javascript nao esta funcionado.
cadastro de usuarios
Lanchonete Coma Bem (Voltada para o internauta)
24horas
function valida_form(){
if(document.getElementById(“login”).value == “”) {
alert(“Por favor preencha o campo Nome”);
document.getElementById(“login”).focus();
return false
}
}
Entrada de dados para o cadastrodigite
apenas leras minúsculas e sem espaços em branco (Preenchimento obrigatório)
Login:
Senha:
Informações complementares
(Os campos com ” ** ” têm preenchimento obrigatório)
**nome:
**E-mail:
**Telefone:
Celular:
] **Endereço (rua, praça, avenida e número)
Complemento (bairro, jardim, etc.)
Para comfirmar o envio dos dados clique em “Enviar dados”
Olá,
ENvie o código completo para dar uma olhada.
Obrigado cara, essa informação foi de grande valia. Deus continue te abençoando!. 😉
Olá Ricardo,
Fico feliz por te ajudado. Obrigado.