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

Categorías: html, jquery
  1. junio 22, 2011 a las 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 a las 7:34 pm

    este es el form. gracias

  3. junio 22, 2011 a las 7:45 pm

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

    saludos

  4. junio 22, 2011 a las 8:22 pm

    listo

  5. junio 23, 2011 a las 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 a las 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 a las 2:54 pm

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

  8. Valeria
    junio 5, 2013 a las 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.

Replica a Valeria Cancelar la respuesta