2012-01-27 17 views
10

Tengo este formulario con entradas con el mismo nombre pero ids similares (incrementales).jQuery Validar múltiples campos con el mismo nombre

Quiero que el documento a validar si hay un nombre en persona, la edad debe ser obligatorio ..

Lo que sucede ahora es que sólo la primera entrada es obligatoria.

Aquí está mi código:

<html lang="en"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> 
</head> 
<body> 
    <form id="people"> 
     <div class="section"> 
      <input id="person1" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age1" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person2" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age2" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     <div class="section"> 
      <input id="person3" name="person" class="person" type="text" placeholder="First Name" /> 
      <input id="age3" name="age" class="age" type="text" placeholder="Age" /> 
     </div> 
     ... 
     <input type="submit" id="submit" name="submit" value="Add" /> 
    </form> 
    <script type="text/javascript"> 
     $(function(){ 
      $('#people').validate(); 
      $('#submit').click(function(){ 
       $('[id^="person"]').each(function(){ 
        if ($(this).val().length>0){ 
         //alert($(this).val()); 
         //alert($(this).parent().find('.age').val()); 
         $(this).rules('add', { 
          required: true, 
          minlength: 2, 
          messages: { 
           required: "Specify the person name", 
           minlength: "Minimum of 2 characters" 
          } 
         }); 
         $(this).parent().find('.age').rules('add', { 
          required: true, 
          number: true, 
          messages: { 
           required: "Must have an age", 
           number: "Specify a valid age" 
          } 
         }); 
        } 
       }); 
      }); 
     }); 
    </script> 
</body> 

+1

tener múltiples cuadros de texto con el mismo nombre es probablemente una mala idea !? –

+0

Encontré aquí en stackoverflow algunas respuestas con la función .each() pero no pude hacerlo funcionar ... En el futuro tendría un número dinámico de "filas", así que preferiría tener el mismo nombre para poder obtener son más fáciles en el lado del servidor –

+4

@ stian.net - No hay problema para repetir los nombres de las entradas, de hecho, es una práctica bastante común para los datos tabulares. Ciertamente no es lo que está creando la dificultad en este caso. – nnnnnn

Respuesta

10

El complemento jQuery Validator no admite varios campos con el mismo nombre de fábrica. Deberá editar el origen del complemento para verificar los campos de la forma que desee.

Consulte this answer a una pregunta similar para la solución de problemas.

-5
<div class="section"> 
     <input id="person1" name="person[]" class="person" type="text" placeholder="First Name" /> 
     <input id="age1" name="age[]" class="age" type="text" placeholder="Age" /> 
    </div> 
    <div class="section"> 
     <input id="person2" name="person[]" class="person" type="text" placeholder="First Name" /> 
     <input id="age2" name="age[]" class="age" type="text" placeholder="Age" /> 
    </div> 
    <div class="section"> 
     <input id="person3" name="person[]" class="person" type="text" placeholder="First Name" /> 
     <input id="age3" name="age[]" class="age" type="text" placeholder="Age" /> 
    </div> 

se debe añadir corchetes y recorrer la matriz.

+0

no pudo hacerlo funcionar de esa manera –

+0

el enfoque de matriz de corchetes solo funciona en PHP AFAIK –

0

Amigos!

Para validar el cuadro de texto con el mismo nombre, utilice lo siguiente para mí. Además, no es necesario declarar el parámetro de entrada como matrices.

Aquí 'minVal' es el nombre del cuadro de texto. de manera similar, para el uso desplegable 'document.getElementsByTagName ("select");'

function validateMinimumVal(){ 
    inp = document.getElementsByTagName("TEXT"); 
    for (var i = 0; i < inp.length; ++i) { 
     if (inp[i].name =="minVal" && inp[i].value==''){ 
      alert('plesae Add a MINIMUM VALUE!!'); 
       return false; 
      } 
     } 
    return true; 
} 

Hope this helps !! Jagan

Cuestiones relacionadas