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

Programação

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

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

Quando trabalhamos com formulários na web, a validação é essencial. Em muitos casos, usamos o JavaScript para garantir que os dados não sejam enviados com campos vazios, o que é importante para a integridade dos dados. Neste exemplo, vamos verificar se o campo com o ID “nome” está vazio. Essa lógica pode ser aplicada a qualquer outro campo de formulário.

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

Verificação simples usando 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>

Outra Forma de Verificação

Você pode também verificar se o campo está vazio desta 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 – Definição da função de validação.
  • if(document.getElementById(“nome”).value.length < 3) – Verifica se o valor do campo “nome” tem menos de 3 caracteres.
  • alert(‘Por favor, preencha o campo nome’); – Exibe um alerta se o campo não tiver o número de caracteres esperado.
  • document.getElementById(“nome”).focus(); – Coloca o foco novamente no campo “nome” para que o usuário corrija o erro.

Adaptando para Outros Campos

Você pode adaptar a verificação para outros campos, como o telefone, que deve ter pelo menos 10 caracteres. Nesse caso, basta alterar o length < 3 para length < 10.

Verificação de Campos Nulos ou Vazios

Outro exemplo de verificação de campo vazio:

/* função para validação de 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;
}

Conclusão

Validar os dados de um formulário é uma etapa crucial no desenvolvimento de aplicações web. Neste post, mostramos como garantir que campos essenciais, como o nome, sejam preenchidos antes de enviar o formulário. Além disso, você pode adaptar essa verificação para outros campos de acordo com as necessidades de seu formulário. A validação no frontend, com JavaScript, melhora a experiência do usuário e impede o envio de dados indesejados para o servidor.

Loading


Publicação Criada em: dezembro 22, 2012
Atualizado em: março 18, 2025 8:21 pm

Posts relacionados

9 comentários em “Verificar se um campo no Formulário está vazio via JavaScript”

    1. admin

      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
      }

      1. Geraldomung

        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?

    2. Henrique Silva

      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 🙂

  3. atanael mendes

    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”

       

Deixe um comentário

Índice

→ Índice