Validando formulario con jQuery

Si nos gusta utilizar jQuery en el desarrollo de aplicaciones podemos hacer uso de este pequeño tutorial que nos enseña a validar el contenido de los campos de un formulario.

 

¿Cómo hacerlo?

1. Descargar e incluye jquery.js.
2. HTML: En la etiqueta form, incluye onSubmit="return checkForm(this);".
3. HTML: En la etiqueta del campo de entrada (input), incluye onblur="checkField(this);".
4. HTML: Asigna un Identificador a los campos (atributo id). Estos se usará para identificar los campos en el código JavaScript.
5. Javascript: Actualiza la función checkFieldTask() con tus campos.
6. Javascript: Configura demo_mode=false.

HTML

<p id="instructions">Deja los campos en blanco y presiona tab o enviar y se reportará un error.</p>
	
<form action="#" method="post" name="myform" id="myform" onSubmit="return checkForm(this);">
	
	<label for="field1">Campo 1</label>
	<input name="field1" id="field1" type="text" value="" onblur="checkField(this);" /><br />
	
	<label for="field2">Campo 2</label>
	<input name="field2" id="field2" type="text" value="" onblur="checkField(this);" /><br />

	<br /><input name="subbtn" id="subbtn" type="submit" value="Enviar Data" />
	
</form>

JavaScript

var demo_mode = true; // set to false to allow form submit

function checkFieldTask (aFieldName) {
	var bool = true;
	switch (aFieldName) {
		/*
			checkFieldTask() customization instructions:
			
			1. Hacer un nuevo "case" por cada campo que deseas validar.
			2. Coloca tu validacion dentro de la sentencia "if"
			3. Llama la funcion "failField" cuando la validacion falla, muestra un mensaje de error.
			4. Configurar la variable "bool=false" cuando la validacion falló.
			5. Llama la funcion "passField" cuando la validacion fue correcta.
		*/
		case "field1":
			if ($("#"+aFieldName).val()=="") {
				failField(aFieldName,"Error message for Field 1.");
				bool = false;
			} else {
				passField(aFieldName);
			}
			break;
		case "field2":
			if ($("#"+aFieldName).val()=="") {
				failField(aFieldName,"Error message for Field 2.");
				bool = false;
			} else {
				passField(aFieldName);
			}
			break;
	}
	return bool;
}
function checkField (aField) {
	return checkFieldTask(aField.name);
}
function checkForm (aForm) {
	var bool = true;
	for (var i=0; i < aForm.elements.length; i++) {
		if (!checkFieldTask(aForm.elements[i].name)) {
			bool = false;
		}
	}
	if (bool) {
		passField("subbtn");
		if (demo_mode) {
			$("#myform").hide(250);
			$("#instructions").html('Buen trabajo. <a href="#" onclick="demoShowForm();return false;">Mostrar formulario nuevamente</a>');
			return false;
		}
	} else {
		failField("subbtn","Por favor resuelva este error antes de continuar.");
	}
	return bool;
}
function passField (aFieldName) {
	$("#form_alert_"+aFieldName+"_msg").remove();
}
function failField (aFieldName,msg) {
	$("#form_alert_"+aFieldName+"_msg").remove(); // in case there are any from last time
	$("#"+aFieldName).after(alertMsgHTML(aFieldName,msg));
}
function alertMsgHTML (aFieldName, msg) {
	return '<div id="form_alert_'+aFieldName+'_msg" class="form_alert_msg">'+msg+'</div>';
}
function demoShowForm () {
	$("#instructions").text("Deja los campos en blanco y presiona tab o enviar y se reportará un error.");
	$("#myform").show(250);
}
$(document).ready(function(){
   document.myform.field1.focus();
});

CSS

.form_alert_msg {
	font-size: 14px;
	font-weight: bold;
	color: #990000;
	display:inline;
	background-color: #FFFFCC;
	padding: 2px 5px;
	margin-left: 5px;
	border-top: 1px solid #990000;
	border-right: 2px solid #990000;
	border-bottom: 1px solid #990000;
	border-left: 2px solid #990000;
}

Vía DavidVanVickle