Prosa Digital - Tecnologia e Sociedade

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:

1. Você insere o script na sua página.
2. 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’ />
3. 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!