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;
}