Inicio > html, jquery > Validar Input dinámico con Jquery

Validar Input dinámico con Jquery

Seguido del post de agregar un input dinamicamente, para enviarlo a nuestro php/asp/jsp, etc siempre es necesario hacer una validación con Javascript para esto crearemos una función que nos valide si el campo es vació (ustedes pueden crear cuantas validaciones necesiten),

Tendremos algo así:

function validarCampos(){
var $inputs = $('#form :input'); // Obtenemos los inputs de nuestro formulario
var formvalido = true; // Para saber si el form esta vacio 

$inputs.each(function() {  // Recorremos los inputs del formulario (uno a uno)
if(!isEmpty($(this).val())){ // Verificamos que el input este vacio 
$(this).css('background','red'); // Agregamos un fondo rojo si este esta vacio
formvalido = false;
}else{
$(this).css('background',''); // quitamos el fondo rojo si este esta lleno
}
});

return formvalido; // retornamos segun corresponda
}

/*
* Funcion que valida que un campo sea completado
* @retun bool
*/
function isEmpty(val){
if(jQuery.trim(val).length <= 0)
	return false;
return true;
}

El código está bastante comentado si quedan dudas pueden consultar, para la próxima veremos como enviar el formulario a PHP y guardarlo en una base de datos Mysql.

Dejo el código fuente como de costumbre en el link:
http://www.megaupload.com/?d=0M67I8L8

Anuncios
Categorías:html, jquery
  1. junio 22, 2011 en 6:59 pm

    function validarCampos(){
    var $inputs = $(‘#formInscripcion :input’); // Obtenemos los inputs de nuestro formulario
    var formvalido = true; // Para saber si el form esta vacio

    $inputs.each(function() { // Recorremos los inputs del formulario (uno a uno)
    if(!isEmpty($(this).val())){ // Verificamos que el input este vacio
    $(this).css(‘background’,’#c0c0c0′); // Agregamos un fondo verde si este esta vacio
    formvalido = false;
    }
    else{
    $(this).css(‘background’,”); // quitamos el fondo rojo si este esta lleno
    }
    });

    return formvalido; // retornamos segun corresponda
    }
    function isEmpty(val){
    if(jQuery.trim(val).length <= 0)
    return false;
    return true;
    }

    Adapte la funcion de validacion a mi formulario y valida perfectamente pero no envia el formualrio al momento que lo lleno correctamente, a que crees que se deba, gracias de ante mano.

  2. junio 22, 2011 en 7:34 pm

    este es el form. gracias

  3. junio 22, 2011 en 7:45 pm

    podrias enviarme el form + html por correo mbrstr at hotmail.com (at = @)

    saludos

  4. junio 22, 2011 en 8:22 pm

    listo

  5. junio 23, 2011 en 1:09 pm

    Buen dia, me acabo de dar cuenta que el form que te mande si me funcionaba la cosa es que me funciona solo en internet explorer, en firefox como te dije no manda el fomulario, el boton no hace nada, a que se debe esto, se podra resolver? gracias de ante mano…

  6. Fernando
    octubre 18, 2012 en 5:10 pm

    Está al reves tu logica mi chavo, si está vacio debe ser return true porque la funcion se llama isEmpty

  7. Valeria
    junio 5, 2013 en 2:54 pm

    Hola, como ingreso esta informacion a mi base de datos? Gracias!

  8. Valeria
    junio 5, 2013 en 2:56 pm

    muy bueno !!! Era lo que necesitaba, pero me gustaria saber como agrego esta información a la base de datos! Gracias!

  1. No trackbacks yet.

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

A %d blogueros les gusta esto: