Validar campos creados en tiempo de ejecución con JQuery

gabrielvilu · #1 (**permalink**) 19/10/2011, 21:48

Hola, tengo un problema con una página hace una semana y quería ver si me podían ayudar.

El caso es que en esta página tengo un formulario en el que creo Textbox dinámicamente mediante botones creados para tal fin, y necesito validar esos textbox que contienen RUT's (que estén bien escritos, sean de la forma 12.345.678-9, digito verificador, etc.). La función para validar ya la tengo lista en "comprueba_rut.php".

El problema que tengo es que sólo puedo validar (con JQuery) el campo que es creado cuando la página termina de cargar y no puedo validar los campos que son creados en tiempo de ejecución. Sé que existe un plugin para JQuery llamado Vanadium, pero sólo me sirve para los campos creados cuando se ha cargado la página. Necesito que estos campos creados dinámicamente DEBAN ser validados antes de enviarlos a otra página.

Además, si la validación es exitosa, necesito que estos datos sean enviados a una ventana emergente (pop-up), que muestre los datos ingresados en los campos que se han creado. Obviamente, si los datos no cumplen con la validación que se muestre un mensaje y que no se ejecute la ventana emergente.

Ojalá alguien me pueda orientar, estoy recién en esto del JQuery, pero me he quedado pegado en esta parte, adjunto el código correspondiente, Saludos!

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<script type="text/javascript" src="../jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../vanadium_es.js"></script>
<script type="text/javascript">

var contador = 1;
	var tr;
	var td;
	var tabla;
	
function agregar_fila(){
	//$("#contador").val(contador);
	tabla = document.getElementById("tabla_pasaje");
	tr= tabla.insertRow(tabla.rows.length);
	td= tr.insertCell(tr.cells.length);
	//td.innerHTML = "<input type='text' size='20' name='nombre"+contador+"' id='nombre"+contador+"'>";
	td.style.width = "150";
	td= tr.insertCell(tr.cells.length);
	td.innerHTML = "<input class='RUT' type='text' size='20' name='rut"+contador+"' id='rut"+contador+"'>";
	//td.getElementsByTagName("input").addClass(":required");
	contador++;
}

function eliminar_fila(){
	ultima = document.getElementById("tabla_pasaje").rows.length - 1;
	if(ultima>0){
		document.getElementById("tabla_pasaje").deleteRow(ultima);
		contador--;
		//$("#contador").val(contador-1);
	}
}

$(document).ready(function(){
	
	$("#rut_adolescente,.RUT").keyup(function(e){
		var nombre = $(this).val();
		var label=$("#lb_rut0");
		var regexp = /^\d{1,2}\.\d{3}\.\d{3}[-][0-9kK]{1}$/;
		
		if(regexp.test(nombre) & (nombre.length>0)){
			$.ajax({
				type:"POST",
				url:"comprueba_rut.php",
				data:"username="+nombre,
				dataType:"json",
				beforeSend:function(){
					label.html("<img src='lightbox-ico-loading.gif'/>");
				},
				success:function(response){
					label.html(response.msg);
					if(response.msg=="Disponible"){
						$("#enviar").removeAttr("disabled");
					}
					else{
						$("#enviar").attr("disabled","disabled");
					}
				}
			});
		}
		else{
			label.html("");
			$("#enviar").attr("disabled","disabled");
		}
	});
})
</script>  

</head>
<body>
Ingrese su RUT
<form action="" method="post" id="form">
<table width="575" border="1" id="tabla_pasaje">
  <tr>
    <td width="114">
      <input style="font-size:10px; outline-width:0px; vertical-align:top; position:static;" name="agregar" type="button" id="agregar" value="+" onclick="agregar_fila()"/>
      <input style="font-size:10px; outline-width:0px; vertical-align:top; position:static;" name="eliminar" type="button" id="eliminar" value="-" onclick="eliminar_fila()"/> 
      RUT</td>
    <td width="445"><input class=":format;/^(^\d{1,2}\.\d{3}\.\d{3}[-][0-9kK]{1}$)+$/i" name="rut_adolescente" type="text" id="rut_adolescente" size="20" /><label id="lb_rut0"></label></td>
  </tr>
  </table>
<p><input type="submit" name="enviar" value="Guardar" id="enviar"/></p>
</form>
</body>
</html>

Les adjunto imagen para que vean cómo se vería la la página.
El primer texbox valida de lo más bien, pues es creado al finalizar la carga de la página, pero los que se crean al presionar el botón [+] y que se mostrarán debajo del primer textbox no los puedo validar :(

foreverOdd · #2 (**permalink**) 20/10/2011, 15:20

Debes utilizar el metodo live o el delegate para manipular elementos creados luego del load de la pagina.

Saludos