Desenvolvimento - Javascript

Configurando funções de um formulário HTML com JavaScript

Veja neste artigo como utilizar Javascript para fazer validações e configurações em formulários HTML, gerenciando suas propriedades e tratando seu comportamento.

por Diego Cesar Ribeiro


Esse artigo irá ensinar como gerenciar propriedades de um formulário HTML usando o JavaScript. Logo abaixo, segue-se a lista dos quatro tópicos que serão tratados aqui.

  • Verificando se há presença de texto;
  • Verificação de senhas;
  • Usando checkboxs ou rádios para ativar ou desativar outros;
  • Inserindo links em listas select.

Verificando se há presença de texto

Esse primeiro tópico do artigo irá ensinar como saber se o usuário inseriu alguma coisa no campo de texto correspondente. No código que se segue logo abaixo, há um campo de texto e um botão. Logo, esse último, ao ser pressionado, irá verificar se o campo de texto está vazio ou não, dando uma alerta como resposta.

Listagem 1: Código para verificar se há algum texto digitado

<html>
<head>
<script language=javascript type="text/javascript">
	function verificarTexto(){
if (form.texto.value == "")
{alert ("Não há texto escrito") }
}
</script>
</head>
<body>
<form name="form">
<input type=text name="texto">
<input type=button onClick="verificarTexto()">
</form>
</body>
</html>

Nesse código que acabamos de ver, dentro da tag head, criei a função “verificarTexto()”. Essa função irá confirmar que se (if) o input (representado como “form.texto.value”) estiver vazio, então será mostrado um alerta indicando isso.

Já dentro de body, adicionamos essa função a um botão, que logo ao ser pressionado (onClick) a executará.

Verificação de senhas

Já nesse segundo tópico do artigo, será demonstrado como verificar se as duas caixas de senhas são iguais ou não.

Listagem 2: Código para verificar se as duas senhas correspondem

<html>
<head>
<script language=javascript type="text/javascript">
function verificarSenhas(){
if (document.form.senha1.value == document.form.senha2.value)
{alert ("As duas senhas conferem")
}

else{
alert ("As duas senhas não conferem")
}
}
</script>
</head>
<body>
<form name="form">
<input type=text name="senha1">
<input type=text name="senha2">
<input type="button" onClick="verificarSenhas()">
</form>
</body>
</html>

Em head, eu criei a função “verificarSenhas()”. Ela irá testar se o campo “senha1” é igual (==) ao campo “senha2”. Se essa avaliação der positiva, o usuário receberá uma mensagem. Caso dê negativo o teste anterior, então o “else” será acionado e dará ao usuário uma mensagem confirmando que “senha1” e “senha2” não conferem.

Usando checkboxs ou radios para ativar ou desativar outros

Já esse terceiro tópico é um pouco mais complexo. Você verá como manipular rádios ou checkboxs a partir de outros. Por exemplo, ao clicar no checkbox “carro” será marcado o checkbox “azul”. Nesse exemplo logo abaixo, será como uma simulação de uma compra. Ao clicar no radio “Avião”, será acionado o radio “branco”, ao clicar no radio “carro”, será acionado o radio “preto”, e ao clicar no radio “helicóptero”, será acionado o radio “verde”.

Listagem 3: Código para alterar checkboxs ou radios a partir de outros

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
 	function aviao(){
document.form1.nome2[0].checked = true;
document.form1.nome2[1].checked = false;
document.form1.nome2[2].checked = false;
}

function carro(){
document.form1.nome2[0].checked = false;
document.form1.nome2[1].checked = true;
document.form1.nome2[2].checked = false;
}

function helicop(){
document.form1.nome2[0].checked = false;
document.form1.nome2[1].checked = false;
document.form1.nome2[2].checked = true;
}
</script>
</head>
<body>

<form name="form1">
Escolha sua compra:
</br>
Avião:<input type=radio name=nome value="a" onClick="aviao()">
Carro:<input type=radio name=nome value="b" onClick="carro()">
Helicóptero:<input type=radio name=nome value="c" onClick="helicop()">
</br>
Cor disponível:
</br>
Branco:<input type=checkbox name=nome2 value="a">
Preto:<input type=checkbox name=nome2 value="b">
Verde:<input type=checkbox name=nome2 value="c">	
</form>
</body>
</html>

Em head, criamos, então, três funções: “avião()”, “carro()” e “helicop()”. Cada uma irá ativar o radio que representa sua respectiva cor, ativando o mesmo, e desativando os dois restantes. É preciso saber que em JavaScript, a maioria das contagens começa em zero.

Inserindo links em listas select

As listas select são barras de menu que ao serem pressionadas, mostram suas demais opções, como aquele que surge na maioria das vezes em que clicamos com o botão direito de nossos mouses. Aqui, você verá como adicionar links a essas opções seletivas.

Listagem 4: Código para adicionar links a listas select

<html>
<head>
<script type="text/javascript">
function chamaURL(campo) {  
document.location.href = "http://www.teste.com.br"+campo.options[campo.selectedIndex].value;   
}  
</script>
</head>
<body>
<form name="form1"> 
<select name="select" onChange="chamaURL(this)">  
<option selected>Faça sua escolha:</option>
<option value="/teste/pagina1.html">Pagina 1</option>  
<option value="/teste/pagina2.html">Pagina 2</option>  
<option value="/teste/pagina3.html">Pagina 3</option>  
<option value="/teste/pagina4.html">Pagina 4</option>  
</select>  
</form>
</body>
</html>

Esse artigo apresentou como usar as principais funções de JavaScript em um formulário HTML. Existem, em verdade, inúmeras opções de combinações e configurações de comandos JavaScript para isso, por exemplo, aqui não foi apresentado como usar o checkbox no terceiro tópico, e nem precisaria mostrar, basta trocar o “radio” por “checkbox” e tudo já estaria modificado. Por isso, aqui, como em qualquer outro artigo, obra literária ou acadêmica, é mostrado como usar as funções, as particularidades dependem da necessidade de cada um. Esse artigo termina por aqui, boa sorte.
Diego Cesar Ribeiro

Diego Cesar Ribeiro - Natural de Natal/RN, sou um grande entusiasta sobre tudo relacionado à tecnologia e desenvolvimento. Tenho 4 anos de experiêcia na área de desenvolvimento webstandart (html, css, tableless). Para contatos profissionais me mandem um e-mail.