Home » Verificar se um campo no Formulário está vazio via JavaScript

Verificar se um campo no Formulário está vazio via JavaScript

Verificar se um campo do Formulário está vazio via JavaScript

Verificar se um campo do Formulário está vazio via JavaScript

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;
}
Total Views: 5079 ,

8 comentários

  1. 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
      }

  2. Ana Claudia S. Barreto

    Obrigada pelas dicas! ?Simples e objetivo.

  3. 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”

       

  4. Obrigado cara, essa informação foi de grande valia. Deus continue te abençoando!. 😉

Deixe uma resposta