Como puedo validar un campo clonado con jquery

rcm530423 · #1 (**permalink**) 10/02/2012, 19:31

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>

rcm530423 · #2 (**permalink**) 13/02/2012, 01:29

nadie sabe? ayuda