Hola a todos he estado trantando de validar un campo dinamico con jquery pero nadamas no logro hacerlo ya me pase todo el día con esto buscando y buscando no encontre nada no se si me puedan ayudar aqui. este codigo me lo encontre navegando en la web y funciona perfecto, ahora lo que quiero hacer es poder validarlo con un el plugin maskedinput para que las horas queden validadas y no haya problema a la hora de guardarlos.
aqui el codigo de clonado que ya funciona.
Código Javascript
:
Ver original$(document).ready(function() {
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function (el){
$(this).bind("click",addField);
});
});
function addField(){
// ID del elemento div quitandole la palabra "div_" de delante. Pasi asi poder aumentar el número. Esta parte no es necesaria pero yo la utilizaba ya que cada campo de mi formulario tenia un autosuggest , así que dejo como seria por si a alguien le hace falta.
var clickID = parseInt($(this).parent('div').attr('id').replace('div_',''));
// Genero el nuevo numero id
var newID = (clickID+1);
// Creo un clon del elemento div que contiene los campos de texto
$newClone = $('#div_'+clickID).clone(true);
//Le asigno el nuevo numero id
$newClone.attr("id",'div_'+newID);
//Asigno nuevo id al primer campo input dentro del div y le borro cualquier valor que tenga asi no copia lo ultimo que hayas escrito.(igual que antes no es necesario tener un id)
//$newClone.children("input").eq(0).attr("id",'materiales'+newID).val('');
$newClone.children("input").eq(0)//.attr("id",'materiales'+newID).val('');
//Borro el valor del segundo campo input(este caso es el campo de cantidad)
//$newClone.children("input").eq(1).val('');
//$newClone.children("input").eq(1)//.val('');
//Asigno nuevo id al boton
$newClone.children("input").eq(2).attr("id",newID)
//Inserto el div clonado y modificado despues del div original
$newClone.insertAfter($('#div_'+clickID));
//Cambio el signo "+" por el signo "-" y le quito el evento addfield
$("#"+clickID).val('-').unbind("click",addField);
//Ahora le asigno el evento delRow para que borre la fial en caso de hacer click
$("#"+clickID).bind("click",delRow);
}
function delRow() {
// Funcion que destruye el elemento actual una vez echo el click
$(this).parent('div').remove();
}
ahora el formulario
Código PHP:
Ver original<!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=ISO-8859-1" />
<meta content="jquery, forumlario dinamico, timersys, tutorial" name="keywords"/>
<title>Timersys </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"></script>
<script type="text/javascript" src="js/jquery.addfield.js"></script>
<script language="javascript">
//esto es lo que quiero que valide pero ya le busque y no lo consigo,
//se los dejo asi para ver si me entiende lo que quiero hacer
//esto lo que hace es validar las horas que no sean mayor a 24 horas
//pero no se donde ponerlo para que haga la validacion de los input
//clonados
jQuery(function($)
{
$.mask.definitions['H']='[012]';
$.mask.definitions['N']='[012345]';
$.mask.definitions['n']='[0123456789]';
$("#iddelcampovalidar").mask("Hn:Nn:Nn");
});
function valida(valor)
{
//que no existan elementos sin escribir
if(valor.indexOf("_") == -1)
{
var hora
= valor
.split(":")[0]; if(parseInt(hora) > 23 )
{
$("#iddelcampovalidar").val("");
}
}
}
</script>
</head>
<body>
<fieldset>
<legend>Agregar Horarios</legend>
<div id="stylized" class="myform">
<form id="form" name="form" method="post" action="mostrar.php">
<div id="material_comprado"> </div>
<div id="div_1">
<label>Dia
<span class="small"><select name="dia[]" id="dia">
<option value="lunes">Lunes</option>
<option value="martes">Martes</option>
<option value="miercoles">Miercoles</option>
<option value="jueves">Jueves</option>
<option value="viernes">Viernes</option>
<option value="sabado">Sabado</option>
<option value="domingo">Domingo</option>
</select>
Hora de Entrada:
</span>
</label>
<input type="text" name="entrada[]" />
Hora de Salida:
<input type="text" name="salida[]" /><input class="bt_plus" id="1" type="button" value="+" /><div class="error_form"></div>
</div>
<button type="submit" class="boton">Save</button>
<div class="spacer"></div>
</form>
</div>
</fieldset>
</body>
</html>