Validação de formulário em javascript
Se você está procurando saber como validar campos de um determinado formulário html de forma que a página só aceite ser enviada se todos os campos obrigatórios estiverem preenchidos, é provável que este post possa te ajudar de forma bem prática.
Há um certo tempo desenvolvi um método de validação de campos de formulários que funciona da seguinte forma:
- Você insere o script na sua página.
- Para definir que um campo é obrigatório, basta que coloque um ‘*’ no início do título do atributo ‘title’ do campo. Ex.: <input type=’text’ name=’CEP’ id=’CEP’ title=’*Cep’ />
- Ao enviar o formulário, se o campo marcado com * no title não estiver preenchido, ele ficará com a cor de fundo diferente e ganhará o foco do teclado.
Este script adiciona automaticamente a validação em todos os formulários existentes na página, é cross-browser e não-obstrutivo.
Faça o download do script aqui!
Veja abaixo um exemplo do script:
/**
* Arquivo de funções para validação de formulário
*
* @author Marcus Vinicius Bastos Leandro
* http://www.prosadigital.com/
*
* @create 2008-05-07
*/
/**
* Função que contém chamadas a funções
* que serão feitas no evento onload do window
*/
function doOnLoad(){
//Adiciona função de validação aos forms
adicionarValidacaoForms();
}
/**
* Função que adiciona ao evento onsubmit de todos os formulários
* do documento, a função de validação de formulário "validaForm()"
*
*/
function adicionarValidacaoForms(){
var forms = document.forms;
for ( var i = 0; i < forms.length; i++ ){
forms[i].onsubmit = validaForm;
}
}
/**
* Função que valida os campos obrigatórios num formulário.
* Para que um campos seja obrigatório, o valor do seu atributo
* 'title' deve começar com um asterísco (*)
*
* @return boolean
*/
var validaForm = function(){
var frm = this;
for (var i = 0; i < frm.elements.length; i++){
if ( (frm.elements[i].title.substr(0,1)) == "*" ){
if (frm.elements[i].value == ""){
alert("O campo '"+frm.elements[i].title.substr(1,(frm.elements[i].title.length))+"' é de preenchimento obrigatório!");
frm.elements[i].style.backgroundColor = "#ffffcc";
frm.elements[i].focus();
return false;
break;
}else{
frm.elements[i].style.backgroundColor = "#efefef";
}
}
}
return true;
}
// Atribui ao evento onload da janela a função doOnLoad.
// OBS: Desta forma estamos trabalhando com javascript não-obstrutivo.
window.onload = doOnLoad;
Faça o download do script aqui!
Espero ter ajudado!
Related posts:
Olá Marcus, tudo bom?
Gostei da dica, vou aplicar em futuros formulários.
Abraço,
>> Francisco Hélio,
Tudo bom! Que bom que você gostou! hhehe Eu estou usando esta função em todos os projetos que desenvolvo, pois achei bem prático!
Abraços!
bem inteligente seu formato de validação de formulario
parabens
como seria a ideia para os outros campos como radio , select ?
mais mesmo assim ajudo legal no meu trabalho
e ser aqui for o departamento de sugestao
poderia colocar um exemplo com todos os campos comum de um formulario para a galera ver o script em acao
Testei seu código e não funciona. Qual das funções tenho de chamar quando faço submit? Testei da seguinte forma:
Teste de campos
/**
* Arquivo de funções para validação de formulário
*
* @author Marcus Vinicius Bastos Leandro
* http://www.prosadigital.com/
*
* @create 2008-05-07
*/
/**
* Função que contém chamadas a funções
* que serão feitas no evento onload do window
*/
function doOnLoad(){
//Adiciona função de validação aos forms
adicionarValidacaoForms();
}
/**
* Função que adiciona ao evento onsubmit de todos os formulários
* do documento, a função de validação de formulário “validaForm()”
*
*/
function adicionarValidacaoForms(){
var forms = document.forms;
for ( var i = 0; i < forms.length; i++ ){
forms[i].onsubmit = validaForm;
}
}
/**
* Função que valida os campos obrigatórios num formulário.
* Para que um campos seja obrigatório, o valor do seu atributo
* ‘title’ deve começar com um asterísco (*)
*
* @return boolean
*/
var validaForm = function(){
var frm = this;
for (var i = 0; i < frm.elements.length; i++){
if ( (frm.elements[i].title.substr(0,1)) == “*” ){
if (frm.elements[i].value == “”){
alert(“O campo ‘”+frm.elements[i].title.substr(1,(frm.elements[i].title.length))+”‘ é de preenchimento obrigatório!”);
frm.elements[i].style.backgroundColor = “#ffffcc”;
frm.elements[i].focus();
return false;
break;
}else{
frm.elements[i].style.backgroundColor = “#efefef”;
}
}
}
return true;
}
// Atribui ao evento onload da janela a função doOnLoad.
// OBS: Desta forma estamos trabalhando com javascript não-obstrutivo.
window.onload = doOnLoad;
Numeros:
Testei assim e não funcionou:
Teste de campos
/**
* Arquivo de funções para validação de formulário
*
* @author Marcus Vinicius Bastos Leandro
* http://www.prosadigital.com/
*
* @create 2008-05-07
*/
/**
* Função que contém chamadas a funções
* que serão feitas no evento onload do window
*/
function doOnLoad(){
//Adiciona função de validação aos forms
adicionarValidacaoForms();
}
/**
* Função que adiciona ao evento onsubmit de todos os formulários
* do documento, a função de validação de formulário “validaForm()”
*
*/
function adicionarValidacaoForms(){
var forms = document.forms;
for ( var i = 0; i < forms.length; i++ ){
forms[i].onsubmit = validaForm;
}
}
/**
* Função que valida os campos obrigatórios num formulário.
* Para que um campos seja obrigatório, o valor do seu atributo
* ‘title’ deve começar com um asterísco (*)
*
* @return boolean
*/
var validaForm = function(){
var frm = this;
for (var i = 0; i < frm.elements.length; i++){
if ( (frm.elements[i].title.substr(0,1)) == “*” ){
if (frm.elements[i].value == “”){
alert(“O campo ‘”+frm.elements[i].title.substr(1,(frm.elements[i].title.length))+”‘ é de preenchimento obrigatório!”);
frm.elements[i].style.backgroundColor = “#ffffcc”;
frm.elements[i].focus();
return false;
break;
}else{
frm.elements[i].style.backgroundColor = “#efefef”;
}
}
}
return true;
}
// Atribui ao evento onload da janela a função doOnLoad.
// OBS: Desta forma estamos trabalhando com javascript não-obstrutivo.
window.onload = doOnLoad;
Numeros:
Miguel » Você não precisa chamar nenhuma função no onsubmit. Este tipo de desenvolvimento em javascript se chama não-obstrutivo. De modo que as chamadas às funções não são declaradas no HTML e ficam implícitas. Neste caso, função:
/**
* Função que adiciona ao evento onsubmit de todos os formulários
* do documento, a função de validação de formulário “validaForm()”
*
*/
function adicionarValidacaoForms(){
var forms = document.forms;
for ( var i = 0; i < forms.length; i++ ){
forms[i].onsubmit = validaForm;
}
}
Já adiciona o método validador a todos os formulários.
Espero ter ajudado. Qualquer dúvida pode postar novamente.
É possível colocar e um formulário asp?? fiz um teste em html e tb não funcionou como é feito a chamada desta função tem como explicar ?Li post anteriores e nimguém está entendendo como chamar o arquivo de validação
Você quer saber como colocar o script na página é isso? É uma dúvida de html, mas vou explicar aqui:
Insere a linha abaixo entre as tags
OBS: para que funcione é necessário que o script esteja na raiz do site.
Abs!
Marcus colocar que linha entre que TAGs? pois na sua resposta nao saiu as TAGS e nem a linha
Cara,
Muito bom, utilizei em meu sistema aqui. Nota 10 pra ti!!!