Capítulo 17

Formulários - validação

JavaScript

<script type="text/javascript">
function campoObrigatorio(campo) {
	if(campo.value.length <1 || campo.value.defaultValue) {
		return false;
	} else {
		return true;
	} 
}
function campoEmail(campo) {
	if(campo.value.indexOf("@") == -1 || campo.value.indexOf(".") == -1) {
		return false;
	} else {
		return true;
	} 
}
function campoNumerico(campo) { 
	if(/[^\d]/.test(campo.value)) {
		return false; 
	} else {
		return true;
	} 
}
function campoSelecao(campo) {
	if(!campo.selectedIndex > 0) {
		return false;
	} else {
		return true;
	} 
}
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;
				}
			}	
	
			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;
				}
			}	
	}
}
	var formulario = document.getElementById("fdemo");
	var qdeCampos = formulario.elements.length;
		formulario.onsubmit = function() {
			return validarFormulario(this);
		}
}
</script>

HTML

...
<form  action= "http://www.maujor.com"  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="obrigatorio email" />
	<label for="cpf" >CPF:</label>
		<input type="text" id="cpf" maxlength="11" name="cpf" class="obrigatorio 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>
...

Selecione uma cor