A consistência de formulários JavaScript é ideal para utilização
em sistemas onde não seja necessários padrões elevados de segurança,
por exemplo, sistemas administrativos de sites.
Para realizar esta consistência vamos utilizar 3 scripts que
encontram-se na área de script. São eles:
Passo 1
Adicione as seguintes linhas ao seu html.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
</head>
Com estas linhas adicionadas será possível utilizar as funções contidas
nestes arquivos .js
Passo 2
Atribua um nome para o seu formulário, neste caso chamamos de formTeste.
<FORM NAME="formTeste">
Lembre-se que é importante prestar atenção nas letras maiúsculas e minúsculas.
Passo 3
Adicione um evento OnSubmit ao seu formulário, ou seja quando o botão submit
for pressionado chamaremos uma determinada rotina. Neste caso chamaremos a
rotina checkForm.
<FORM NAME="formTeste" OnSubmit="return checkForm()">
Passo 4
Agora vamos criar uma rotina de validação.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
return true;
}
</script>
</head>
Passo 5
Vamos adicionar a validação do seguinte campo:
<INPUT TYPE="TEXT" NAME="nome" SIZE=20 MAXLENGTH=50>
Neste caso verificaremos se o campo está vazio, caso esteja vazio
então deverá exibir um alerta.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
if(isEmpty(document.formTeste.nome.value)){
alert("Por favor preencha seu nome");
document.formTeste.nome.focus();
return false;
}
return true;
}
</script>
</head>
Passo 6
Agora vamos validar um campo numérico:
<INPUT TYPE="TEXT" NAME="numero" SIZE=20 MAXLENGTH=50>
Neste caso verificaremos se o campo digitado corresponde a um número,
ou seja, se não foi digitado nenhum tipo de caractere alfa numérico.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
if(isEmpty(document.formTeste.nome.value)){
alert("Por favor preencha seu nome");
document.formTeste.nome.focus();
return false;
}
if(isNumber(document.formTeste.numero.value)){
alert("Por favor preencha preencha o campo número com um número válido");
document.formTeste.numero.focus();
return false;
}
return true;
}
</script>
</head>
Passo 7
Agora vamos validar um e-mail:
<INPUT TYPE="TEXT" NAME="email" SIZE=20 MAXLENGTH=50>
O campo e-mail deve estar preenchido com um endereço de e-mail válido.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmpty.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isNumber.js"></script>
<SCRIPT LANGUAGE="JavaScript" SRC="isEmail.js"></script>
<SCRIPT LANGUAGE="JavaScript">
function checkForm(){
<BLOCKQUOTE>
if(isEmpty(document.formTeste.nome.value)){
alert("Por favor preencha seu nome");
document.formTeste.nome.focus();
return false;
}
if(isNumber(document.formTeste.numero.value)){
alert("Por favor preencha preencha o campo número com um número válido");
document.formTeste.numero.focus();
return false;
}
if(isNumber(document.formTeste.email.value)){
alert("Por favor informe um endereço de e-mail válido");
document.formTeste.email.focus();
return false;
}
return true;
</BLOCKQUOTE>
}
</script>
</head>
O erro mais comum na implementação destas rotinas é o mal uso de
maiúsculas e minúsculas nos nomes de formulário, campo e rotina
JavaScript. Sempre que ocorrer um erro verifique se o Case
está correto.
Outro erro comum é quando utilizamos um <INPUT TYPE="IMAGE">
para submeter um formulário, pois neste caso em especial ele não
aciona o evento OnSubmit.
Uma boa dica é utilizar o JavaScript debugger para Netscape ou
então o MS Debugger para Internet Explorer.
Todas as rotinas utilizadas aqui são produzidas com JavaScript 1.0, sendo
assim não existe o problema de incompatibilidade entre browsers.
Caso tenham dúvidas, por favor e-mail-me-at celso.goya@moinho.net
[]'s
Celso Goya
Linux sob o ponto de vista comercial e social
Versão para impressora
Indicar para um amigo
Enviar artigo