2013-09-04 40 views
10

Tôi có 3 trường nhập yêu cầu số lượng người và trong số đó có bao nhiêu người là người lớn và số lượng con là bao nhiêu. Tôi cố gắng để sử dụng jQuery xác nhận plugin để thêm một phương pháp tùy chỉnh nơi trẻ em + người lớn = số ngườijQuery xác thực trên nhiều trường

Đây là cuộc gọi xác nhận của tôi

$("#form2").validate({ 
    errorElement: "span", 
     rules: { 
     attendees: { 
      required: true, 
      digits: true 
     },    
     adults: { 
      required: true, 
      digits: true 
     },    
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     attendees: "Enter the number of persons (including yourself)", 
     adults: "Enter number of adults", 
     children: "Enter number of childern"     
    }    
}); 

tôi nhìn vào tính năng nhóm và addMetod của các plugin Validate nhưng có vẻ như nó chỉ được chế tác với một yếu tố trong đầu. Bất kỳ ý tưởng?

+0

Bạn có thể ném nó vào câu lệnh '.each()' có thể? –

+1

Tôi khuyên bạn nên bỏ qua đầu vào của người tham dự nếu bạn muốn đặt giới hạn tổng cộng = người lớn + trẻ em. Thay vào đó, có một trường ẩn "tổng" giá trị cần được cập nhật cho trẻ em + người lớn ngay trước khi biểu mẫu được gửi. – Neeraj

Trả lời

24

Làm theo the documentation để tạo phương pháp/quy tắc tùy chỉnh. Ở đây, tôi chỉ cần gọi nó là totalCheck, nhưng bạn có thể đặt tên nó là bất cứ điều gì bạn muốn.

$.validator.addMethod('totalCheck', function(value, element, params) { 
    var field_1 = $('input[name="' + params[0] + '"]').val(), 
     field_2 = $('input[name="' + params[1] + '"]').val(); 
    return parseInt(value) === parseInt(field_1) + parseInt(field_2); 
}, "Enter the number of persons (including yourself)"); 

Nó được triển khai giống như bất kỳ quy tắc nào khác. Hai tham số là thuộc tính name của hai trường khác mà bạn muốn kiểm tra. Vì quy tắc mới này cho biết trường phải chứa tổng của hai trường khác, các quy tắc requireddigits hiện không cần thiết và có thể bị xóa.

$("#form2").validate({ 
    errorElement: "span", 
    rules: { 
     attendees: { 
      totalCheck: ['adults', 'children'] // <-- your custom rule 
     }, 
     adults: { 
      required: true, 
      digits: true 
     }, 
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     adults: "Enter number of adults", 
     children: "Enter number of childern" 
    } 
}); 

Working DEMO: http://jsfiddle.net/hBXL6/

+1

Cảm ơn người đàn ông ... tốt công việc – Binaryrespawn

+0

là có một số thông số giới hạn cho điều này? – Limon

+0

@Limon, không giới hạn số lượng thông số mà tôi biết. – Sparky

-1

Như được đề xuất trong các nhận xét, đây không phải là phương pháp hay. Tuy nhiên, nếu bạn vẫn muốn làm điều đó:

$("#form2").validate({ 
    errorElement: "span", 
     rules: { 
     attendees: { 
      equal: $("#form2 #adults").val() + $("#form2 #children").val(); 
     },    
     adults: { 
      required: true, 
      digits: true 
     },    
     children: { 
      required: true, 
      digits: true 
     } 
    }, 
    messages: { 
     attendees: "Enter the number of persons (including yourself)", 
     adults: "Enter number of adults", 
     children: "Enter number of childern"     
    }    
}); 
+0

Không có phương thức hoặc quy tắc nào được gọi là 'bằng'. – Sparky

0

Câu trả lời của Sparky là chưa hoàn chỉnh: các adultschildren cần phải tái xác nhận attendees khi thay đổi.

Nối này ở cuối:

$('input[name=adults],input[name=children]').on('change', function(){ 
    $('input[name=attendees]').removeData("previousValue").valid(); 
}); 

Lưu ý: mặc dù tôi tổ chức một tiến sĩ trong CS, tôi không có những điểm chưa bình luận ... do đó một câu trả lời mới.

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