Validación formularios con jQuery

:: validaciones web ::

Voy a mostrar lo fácil que es validar un formulario usando jQuery y sabiendo un poco de javascript podrás realizar todas las validaciones que necesites, dándole a tu web más dinamismo que usando esos viejos alerts de javascript.




El código sería el siguiente, la explicación del mismo a continuación:

<script src="jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
  $("#button-validar").click(function(evento){
 $(".alert-message").css("display","none"); 
 var resultado_ok=true;  
 if (jQuery.trim($("#campo1").val())=="")
 {
   $("#campo1-alert").html("Error en el campo1.");  
   $("#campo1-alert").fadeIn();
   $("#campo1-alert").css("display","block");
   resultado_ok=false;
 }
 if (jQuery.trim($("#campo2").val())=="")
 {
   $("#campo2-alert").html("Error en el campo2.");  
   $("#campo2-alert").fadeIn();
   $("#campo2-alert").css("display","block");
   resultado_ok=false;
 }
 if (resultado_ok==true)
 {
  $("#form-validar").submit();
 }
  });
})
</script>
<style>
.alert-message{
  display: none;
  background: #FCE3E0;
  border: 1px dashed #F30;
  padding: 5px 5px 5px 15px;
  margin: 5px 0px 5px 0px;
}
</style>

<form action="#" id="" name="">
<label>valor1: </label>
<input id="campo1" name="campo1" type="text" />

<div class="alert-message" id="campo1-alert">
</div>
<label>valor2: </label>
<input id="campo2" name="campo2" type="text" />

<div class="alert-message" id="campo2-alert">
</div>
<input id="button-validar" name="button-validar" type="button" value="Enviar" />
</form>

Lo primero es incluir el fichero jquery.js; luego, entre las etiquetas head, la validación jQuery; algunos estilo; y por último el formulario que vamos a validar. Si te fijas, en lugar de un botón del tipo submit, he empleado un simple botón.

La validación jQuery se podría incluir en otro fichero js, sobre todo si el formulario es más amplio que el del ejemplo. La explicación de la validación:

Al hacer click sobre el botón de nuestro formulario con id button-validar, primero ocultaremos la capas que se emplean para mostrar los mensajes de alertas (sobre todo para la segunda y sucesivas validaciones del formulario), A continuación establecemos a true el valor de la variable resultado_ok, la cual nos indicará que el formulario esta correctamente o incorrectamente validado.

Luego vienen las validaciones de los campos: capturamos el valor de cada input mediante su id. En caso de que este en blanco se hace visible el correspondiente mensaje de alerta y se establece a false la variable resultado_ok. En caso de que la varible resultado_ok sea verdadero, se procederá al envío del formulario.

Apreciar que en los estilos he creado la clase alert-message con la propiedad display: none, para que no se muestren de inicio los mensajes de alerta.

A continuación el ejemplo en funcionamiento:

valor1:

valor2: