Posteado por: irodriguezm | octubre 29, 2010

Validación de formulario con jquery opción 1

Hoy voy a mostrar una forma sencilla, rapida y perzonalizable de validar los formularios con jquery, la libreria original la podemos encontrar en este enlace. Lo que vamos a hacer es personalizar dos input (password y confirmar password) para que nuestra validación nos indique si fueron ingresados y si fue ingresado el mismo texto en los dos y la segunda validación sera de un campo select, veamos el resultado final (disculpen la lupa):

veamos el css con unas pequeñas modificaciones, como el color rojo no me agrada le hacemos algunos cambios


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

ahora veamos el 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 "txt_password":
                        if ($("#"+aFieldName).val()=="") {
                                failField(aFieldName,"Debe ingresar un password");
                                bool = false;
                        } else {
                                passField(aFieldName);
                        }
                        break;
						//
						 case "txt_password2":
                        if ($("#"+aFieldName).val()=="") {
                                failField(aFieldName,"Debe ingresar el password nuevamente");
                                bool = false;
								
								
                        } 
					
						else if ($("#"+aFieldName).val()!=$("#txt_password").val())
						{
                                failField(aFieldName,"No coinciden los password");
                                bool = false;
                        }
						else {
                                passField(aFieldName);
                        }
                        break;
						
						
						
							//
						 case "select_nivel":
                        if ($("#"+aFieldName).val()=="0") {
                                failField(aFieldName,"Debe  seleccionar un nivel de acceso");
                                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);
}

ahora el formulario, donde obtenemos los datos del select desde una consulta en php

<form name="myform" id="myform" method="post" onSubmit="return checkForm(this);" action="">
    
      
    <div><label >Password (*)</label><input type="password" name="txt_password" id="txt_password" onblur="checkField(this);" />
			</div>  
              <div><label >Re Password (*) </label><input name="txt_password2" id="txt_password2" type="password" onblur="checkField(this);" />
			</div>  
 
   
            
              <div><label >Niveles (*) </label><?

$consulta22=mysql_query("SELECT id, unidad FROM niveles");

echo "<select name='select_nivel' id='select_nivel' onblur='checkField(this);'>";
echo "<option value='0'>Elige</option>";
while($registro22=mysql_fetch_row($consulta22))

{
echo "<option value='".$registro22[0]."'>".$registro22[1]."</option>";
}
echo "</select>";
?>
			</div>  
         <br>   
            
<input name="subbtn" id="subbtn" type="submit" value="Guardar Datos" class="enlaceboton" onclick="enviaFormulario();" />  
 
  </form>          
       
         

falta crear la referencia al archivo de jquery y eso seria ojala que a alguien le sea de tanta utilidad como me ha sido a mi, saludos


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: