Java script aula 08 - formulários

FormuláriosCristiano Pires Martins

Fonte: JavaScript - Guia do Programador - Maujor

1

Introdução

Peças de composição de uma página presentes em praticamente todos os web sites;

Interface de coleta de dados, mesmo apenas para busca;

São interativos;

O desenvolvedor não deve supor que o usuário digitará apenas o que se espera.

2

Fundamentos

Primeiro fundamento do uso de JavaScript com formulários: validar campos;

Mas ações não devem apenas no cliente, tem que ser desenvolvida no lado do servidor;

O elemento <form></form> é o container de todos os controles (campos) de um formulário.

3

Elemento form <form action="http://www.cpmart.eng.br" id="fdemo" method="get"></form>

O elemento form admite os atributos:

action: aponta para o endereço em que se encontra o programa destinado a processar os dados enviados pelo formulário;

method: define o método de envio de dados para o servidor (get/post);

enctype: tipo de codificação dos dados enviados para o servidor;

accept-charset: lista de codificação de caracteres. Por default usa a mesma codificação do documento;

accept: especifica uma lista de tipos de conteúdo para os dados a serem aceitos e processados no servidor;

name: nome para o formulário. Esse atributo está em desuso e, em seu lugar, deve ser usado o atributo id.

4

http://www.maujor.com/

Outros atributos do form

id

class

lang

style

title

target

onsubmit

onreset

onclick

ondblclick

onmousedown

onmouseup

onmouseover

onmousemove

onmouseout

onkeypress

onkeydown

onkeyup

5

Controles de Formulário

inputtype

textpasswordcheckboxradiosubmitresetfilehiddenimagebutton

acceskeytabindex

namesrcaltsizemaxlenghtvalue (obrig. checkbox e radio)

checked (obrig. checkbox e radio)readonlydisabledusemapalign

6

Objeto formulário

7

HTML<form method=” ” action=” ” id=”fdemo”>

...</form>

JavaScript<script type=”text/javascript”>

window.onload = function( ){var formdemo = document.getElementById(“fdemo”);

}</script>

Objeto formulário

8

HTML<form method=” ” action=” ” id=”fdemo”>

...</form>


window.onload = function( ){var formdemo = document.forms[0];

}</script>ou

<script type=”text/javascript”>window.onload = function( ){

var formdemo = document.forms[“fdemo”];}</script>

Propriedades do objeto form action

9

HTML<form method=”post” action=”http://www.maujor.com” id=”fdemo”>

...</form>


window.onload = function( ){var fdemo = document.getElementById(“fdemo”);alert(fdemo.action); //alerta http://www.maujor.com

}</script>

Propriedades do objeto form method

10

HTML<form method=”post” action=” ” id=”fdemo”>

...</form>


window.onload = function( ){var fdemo = document.getElementById(“fdemo”);alert(fdemo.method); //alerta post

}</script>

Propriedades do objeto form name

11

HTML<form method=”post” action=” ” id=”fdemo” name=”fnome”>

...</form>


window.onload = function( ){var fdemo = document.getElementById(“fdemo”);alert(fdemo.name); //alerta fnome

}</script>

Propriedades do objeto form length

12


<label for=”nome”>Nome:</label><input type=”text” id=”nome”/><label for=”email”>Email:</label><input type=”text” id=”email”/><input type=”submit” value=”OK”/>

</form>JavaScript


var fdemo = document.getElementById(“fdemo”);alert(fdemo.length); //alerta 3

}</script>

Retorna a quantidade de controles existentes

no formulário

Propriedades do objeto form elements

13


<label for=”nome”>Nome:</label><input type=”text” id=”nome”/><label for=”email”>Email:</label><input type=”text” id=”email”/><input type=”submit” value=”OK”/>

</form>JavaScript


var fdemo = document.getElementById(“fdemo”);alert(fdemo.elements[1].tagName); //alerta INPUTalert(fdemo.elements.item(2).value); //alerta OKalert(fdemo.elements.item(0).value);alert(fdemo.elements.item(1).value);

}</script>

Retorna uma coleção de todos os controles

existentes no formulário

FOrm - html5

Apenas letras<input type="text" required="required" name="text" pattern="[a-z\s]+$" />

Apenas números<input type="text" required="required" name="numbers" pattern="[0-9]+$" />

Data<input type="date" required="required" maxlength="10" name="date" pattern="[0-9]{2}\/[0-9]{2}\/[0-9]{4}$" min="2012-01-01" max="2014-02-18" />

14

FORM - HTML5

Hora<input type="time" required="required" maxlength="8" name="hour" pattern="[0-9]{2}:[0-9]{2} [0-9]{2}$" />

Campos genéricos de texto<input type="text" required="required" name="name" />

15

Validação: Senha

16

<html><head>

<title>Validade Senha</title><script>function validarSenha(){senha1 = document.f1.senha1.valuesenha2 = document.f1.senha2.valueif (senha1 == senha2)

alert("SENHAS IGUAIS")else

alert("SENHAS DIFERENTES")}</script>

</head><body>VALIDAR SENHA<br><form action="" name="f1">Senha: <input type="password" name="senha1" size="20"><br>Confirmar Senha: <input type="password" name="senha2" size="20"><br><input type="button" value="Validar" onClick="validarSenha()">

</form></body></html>

Validação: Verifica número Inteiro

17

<script type="text/javascript">

var expressao = /^\d+$/;

function verificarInteiro( val ){ if( expressao.test( val ) ){ alert( "OK" ); } else{ if( val != null && val != "" ){ alert( "Não é um inteiro válido"); } }}

</script>

<form id="frmInteiro" action="#" onsubmit="verificarInteiro(this.txtInteiro.value); return false;">

<label for="txtInteiro">Valor:</label><input type="text" size="10" id="txtInteiro" name="txtInteiro"><input type="submit" value="Validar">

</form>

• Em JavaScript, uma expressão regular é delimitada por uma barra / inicial e outra final.

• Cada expressão de validação sempre começa com ^ (início de linha) e termina com $ (fim de linha), para garantir que abrange o conteúdo inteiro do texto (parâmetro) a ser validado.

• Existe uma seqüência de expressão regular que significa um dígito (0 a 9): \d.

• Adicionando um + após essa seqüência, significa "uma ou mais ocorrências da seqüência precedente". Isto é, um ou mais dígitos. Note que isso implica o preenchimento obrigatório.

• Assim, temos a expressão regular completa para validar um número apenas composto por dígitos.

Validação: Verifica CEP

18

<script type="text/javascript"> // Função para retirar os espaços em branco do início e do fim da string. function Trim(strTexto) { // Substitui os espaços vazios no início e no fim da string por vazio. return strTexto.replace(/^\s+|\s+$/g, ''); }

// Função para validação de CEP. function IsCEP(strCEP, blnVazio) { // Caso o CEP não esteja nesse formato ele é inválido! var objER = /^[0-9]{2}\.[0-9]{3}-[0-9]{3}$/; strCEP = Trim(strCEP) if(strCEP.length > 0) { if(objER.test(strCEP)) return true; else return false; } else return blnVazio; }</script>

Essa função pode ser chamada na saída do campo CEP, no evento onBlur do textbox ou então no submit da página, no evento onSubmit do formulário.

Validação

19

<script type="text/javascript">

function campoObrigatorio(campo) {if(campo.value.length<1 || campo.value.defaultValue) {

return false;}

else {

return true;}

}

Preenchimento Obrigatório do Campo

Validação

20

function campoEmail(campo) {if(campo.value.indexOf("@")== -1 || campo.value.indexOf(".")==-1) {

return false;}

else {

return true;}

}

Email

Validação

21

function campoNumerico(campo) { if(/[^\d]/.test(campo.value)) {

return false; } else {

return true;}

}

Preenchimento de Campo Numérico

Validação

22

function campoSelecao(campo) {if(!campo.selectedIndex > 0) {

return false;} else {

return true;}

}

Preenchimento de Seleção

Validação

23

window.onload = function() { function validarFormulario(formulario) {for (var i=0; i<qdeCampos; i++) {

var controle = formulario.elements[i];if (controle.className.indexOf("obrigatorio") != -1) {

if(!campoObrigatorio(controle)) {alert("Por favor preencha o campo "+controle.name + ".");

return false;}

}if (controle.className.indexOf("email") != -1) {

if(!campoEmail(controle)) {alert("Por favor forneça um endereço de email válido.");

return false;}

}

Validação

24

if (controle.className.indexOf("cpf") != -1) { if(!campoNumerico(controle)) {

alert("O campo " + controle.name + " deve conter somente números.");

return false;}

}if (controle.name == "cor") {

if(!campoSelecao(controle)) {alert("Por favor selecione uma opção de

cor.");return false;

}}

}}

Continuação...

25

var formulario = document.getElementById("fdemo");var qdeCampos = formulario.elements.length;

formulario.onsubmit = function() {return validarFormulario(this);

}}

Continuação...

26

<form action= "http://www.fatecjales.com.br" id="fdemo" method="post"><label for="nome">Nome:</label>

<input type="text" id="nome" name="nome" class="obrigatorio"/><label for="email" >Email:</label>

<input type="text" id="email" name="email" class="email"/><label for="cpf" >CPF:</label>

<input type="text" id="cpf" maxlength="11" name="cpf" class="cpf"/><h4>Selecione uma cor</h4><select id="cor" name="cor">

<option value="">Selecione</option><option value="azul">Azul</option><option value="verde">Verde</option><option value="amarela">Amarela</option><option value="branca">Branca</option>

</select><input type="submit" value="OK" id="ok" name="ok" /></form>

HTML

http://www.fatecjales.com.br

Java script aula 08 - formulários

Technology

Transcript of Java script aula 08 - formulários