sexta-feira, 14 de dezembro de 2012

Como validar dados com Javascript?

Olá Geeks, neste post vamos brincar um pouco com JavaScript(que de Java não tem nada '-'), que é uma linguagem de script muito utilizada na web por ser versátil e bastante útil no desenvolvimento de websites. Uma das vantagens do JS é a capacidade de inserir códigos da linguagem em documentos HTML, basta implementar a codificação JavaScript entre essas TAGs:
<script type="text/javascript" language="javascript">

Codificação aqui...

</script>

Agora chega de enrolação e vamos ao que interessa, a seguir vamos criar um documento HTML, chamado de "inserir_cliente.html", contendo um formulário de cadastro, e iremos criar uma função em JS dentro desse documento para validar os dados antes de serem enviados do formulário.

<html>

<head>
<title>Inserir Cliente</title>


<script type="text/javascript" language="javascript">
            function validacliente(){

                var f=document.cliente;

                if (f.nome.value==""){
                    alert("Campo 'Nome' tem preenchimento obrigatório!");
                    return false;
                }

               if (f.telefone.value==""){
                    alert("Campo 'Telefone' tem preenchimento obrigatório!");
                    return false;
                }

               if (f.endereco.value==""){
                    alert("Campo 'Endereço' tem preenchimento obrigatório!");
                    return false;
                }

return true;
}
</script>


</head>
<body>

<form action="inserir_cliente" method="post" name="cliente" onsubmit="return validacliente()">

Nome: <input type="text" name="nome"><br><br>
Telefone: <input type="text" name="telefone"><br><br>
Endereço: <input type="text" name="endereco"><br><br>

<input type="submit" value="Enviar">
</form>.

 </body>
</html>

A função foi feita na TAG <head>, com o nome de validacliente(), e no momento que o usuário clicar em "Enviar" do formulário, a função será chamada, pois, dentro da TAG <form>, colocamos o "onsubmit", que redireciona para a função que criamos. No escopo da função criamos a variável "f" que está recebendo o formulário "cliente", em seguida vem as validações de cada campo, caso tenha algum campo vazio, irá aparecer uma janela de alerta, prescrita na função "alert()", e retornará "false", impedindo assim que valores nulos sejam cadastrados. Se todos os campos forem preenchidos corretamente, a função não impedirá o cadastramento de um novo cliente.

Se possível, eu faço um vídeo, demostrando essa função, no canal GeeksField.
Bem, acho que expliquei tudo, caso alguém tenha alguma dúvida, comente ae, caso não, seja feliz =D

2 comentários:

  1. Bom dia amigo, parebéns pelas postagens... muito bom e prático seus turoriais... supere recomendo...

    ResponderExcluir
    Respostas
    1. E muito bom saber disso, continuarei fazendo do mesmo modo ou melhor, pois os Geeks merecem =D

      Excluir