2012-01-27 27 views
10

Tôi có biểu mẫu này với các đầu vào có cùng tên nhưng id tương tự (gia tăng).jQuery Xác thực nhiều trường có cùng tên

Tôi muốn các hình thức để xác nhận nếu có một tên trên người, tuổi phải bắt buộc ..

gì xảy ra bây giờ là chỉ có đầu vào đầu tiên là bắt buộc.

Đây là mã của tôi:

<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

có nhiều hộp văn bản có cùng tên có thể là một ý tưởng tồi? –

+0

Tôi tìm thấy ở đây trong stackoverflow một số câu trả lời với .each() chức năng nhưng tôi không thể làm cho nó hoạt động .. Trong tương lai tôi sẽ có số động của "hàng", vì vậy tôi muốn có cùng tên để tôi có thể nhận được chúng dễ dàng hơn ở phía máy chủ –

+4

@ stian.net - Không có vấn đề gì lặp lại các tên đầu vào, trên thực tế nó là thực hành khá chuẩn đối với dữ liệu dạng bảng. Nó chắc chắn không phải là những gì đang tạo ra những khó khăn trong trường hợp này. – nnnnnn

Trả lời

10

Plugin Trình xác thực jQuery không hỗ trợ nhiều trường có cùng tên ngoài hộp. Bạn sẽ cần chỉnh sửa nguồn của plugin để kiểm tra các trường theo cách bạn muốn.

Xem this answer cho một câu hỏi tương tự cho công việc xung quanh.

-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> 

Bạn nên thêm dấu ngoặc vuông và lặp qua mảng.

+0

không thể làm cho nó hoạt động theo cách đó –

+0

cách tiếp cận mảng dấu ngoặc vuông chỉ hoạt động trong PHP AFAIK –

0

Bạn bè!

Để xác thực hộp văn bản có cùng tên, hãy sử dụng tên sau đây đang hoạt động tốt cho tôi. Ngoài ra, không cần phải khai báo tham số đầu vào như mảng.

Ở đây 'minVal' là tên của hộp văn bản. tương tự, để sử dụng thả xuống '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; 
} 

Hy vọng điều này sẽ hữu ích !! Jagan

Các vấn đề liên quan