2008-12-19 28 views
7

Tôi đã có biểu mẫu với một loạt hộp văn bản bị tắt theo mặc định, sau đó được bật bằng cách sử dụng hộp kiểm bên cạnh mỗi hộp.Sử dụng phụ thuộc vào plugin Xác thực jQuery

Khi được bật, giá trị trong các hộp văn bản này bắt buộc phải là số hợp lệ, nhưng khi bị vô hiệu hóa, chúng không cần giá trị (hiển nhiên). Tôi đang sử dụng plugin jQuery Validation để thực hiện xác thực này, nhưng dường như nó không làm những gì tôi mong đợi.

Khi tôi nhấp vào hộp kiểm và tắt hộp văn bản, tôi vẫn nhận được lỗi trường không hợp lệ mặc dù mệnh đề depends tôi đã thêm vào các quy tắc (xem mã bên dưới). Kỳ lạ thay, những gì thực sự xảy ra là thông báo lỗi cho thấy một giây thứ hai sau đó biến mất.

Dưới đây là một mẫu của danh sách các hộp kiểm & textbox:

<ul id="ItemList"> 
<li> 
    <label for="OneSelected">One</label><input id="OneSelected" name="OneSelected" type="checkbox" value="true" /> 
    <input name="OneSelected" type="hidden" value="false" /> 
    <input disabled="disabled" id="OneValue" name="OneValue" type="text" /> 
</li> 
<li> 
    <label for="TwoSelected">Two</label><input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" /> 
    <input name="TwoSelected" type="hidden" value="false" /> 
    <input disabled="disabled" id="TwoValue" name="TwoValue" type="text" /> 
</li> 
</ul> 

Và đây là đoạn code jQuery Tôi đang sử dụng

//Wire up the click event on the checkbox 
jQuery('#ItemList :checkbox').click(function(event) { 
    var textBox = jQuery(this).siblings(':text'); 
    textBox.valid(); 
    if (!jQuery(this).attr("checked")) { 
     textBox.attr('disabled', 'disabled'); 
     textBox.val(''); 
    } else { 
     textBox.removeAttr('disabled'); 
     textBox[0].focus(); 
    } 
}); 

//Add the rules to each textbox 
jQuery('#ItemList :text').each(function(e) { 
    jQuery(this).rules('add', { 
     required: { 
      depends: function(element) { 
       return jQuery(element).siblings(':checkbox').attr('checked'); 
      } 
     }, 
     number: { 
      depends: function(element) { 
       return jQuery(element).siblings(':checkbox').attr('checked'); 
      } 
     } 
    }); 
}); 

Bỏ qua các lĩnh vực tiềm ẩn trong mỗi li nó ở đó vì Tôi đang sử dụng phương pháp Html.Checkbox của asp.net MVC.

+0

Tôi đang nhận xét thay vì trả lời vì tôi chưa bao giờ sử dụng plugin xác thực. Bạn đã thử đặt textBox.validate() trong phần đúng của câu lệnh if kiểm tra hộp kiểm chưa? – cLFlaVA

+0

Thật không may là không làm điều đó –

Trả lời

11

Sử dụng tùy chọn "bỏ qua" (http://docs.jquery.com/Plugins/Validation/validate#toptions) có thể là cách dễ nhất để bạn giải quyết vấn đề này. Phụ thuộc vào những gì khác bạn có trên biểu mẫu. Ví dụ: bạn sẽ không lọc các mục bị vô hiệu hóa nếu bạn có các điều khiển khác đã bị tắt nhưng bạn vẫn cần xác thực vì một số lý do. Tuy nhiên, nếu tuyến đường đó không hoạt động, sử dụng lớp bổ sung để lọc (thêm và xóa bằng hộp kiểm của bạn) sẽ đưa bạn đến nơi bạn muốn đến, nhưng dễ dàng hơn.

I.e.

 $('form').validate({ 
      ignore: ":disabled", 
      ... 
     }); 
+0

Đẹp và đơn giản - điều này đã giải quyết nó cho tôi. Cảm ơn! –

+0

không hoạt động đối với tôi. – drudru

+0

@drudru: bạn sẽ muốn xác minh rằng bộ chọn của bạn là chính xác. Tất nhiên, ": disabled" chỉ định rằng tất cả các bộ chọn bị vô hiệu hóa sẽ bị bỏ qua. Ngoài ra, bỏ qua: ".ignoreMe" sẽ bỏ qua tất cả các phần tử với lớp "ignoreMe". – Ted

0

Tôi không biết đây có phải là những gì bạn đang thực hiện hay không ... nhưng sẽ không thay đổi .yêu cầu .wasReq (với tư cách là trình giữ chỗ để phân biệt điều này có thể không cần thiết) khi kiểm tra hộp làm điều tương tự? Nếu nó không được chọn, trường này không bắt buộc - bạn cũng có thể removeClass (số) để loại bỏ lỗi ở đó.

Theo hiểu biết tốt nhất của tôi, ngay cả khi trường bị vô hiệu hóa, các quy tắc áp dụng cho trường đó vẫn được áp dụng. Ngoài ra, bạn luôn có thể thử này ...

// Removes all values from disabled fields upon submit 
$(form).submit(function() { 
    $(input[type=text][disabled=disabled]).val(); 
}); 
0

tôi havent thử plugin validator, nhưng thực tế là thông điệp cho thấy một splitsecond nghe giống như là một ràng buộc đôi, làm thế nào để bạn gọi chất kết dính của bạn? Nếu bạn liên kết trong một hàm, hãy thử hủy liên kết ngay trước khi bạn bắt đầu, như vậy:

$('#ItemList :checkbox').unbind("click"); 
...Rest of code here... 
0

Không được xác thực trường sau khi vô hiệu/bật?

jQuery('#ItemList :checkbox').click(function(event) { 
     var textBox = jQuery(this).siblings(':text'); 

     if (!jQuery(this).attr("checked")) { 
       textBox.attr('disabled', 'disabled'); 
       textBox.val(''); 
     } else { 
       textBox.removeAttr('disabled'); 
       textBox[0].focus(); 
     } 
     textBox.valid();  
}); 
4

Thông thường khi làm điều này, tôi bỏ qua 'phụ thuộc' và chỉ cần sử dụng quy tắc required jQuery Validate và để cho nó xử lý việc kiểm tra dựa trên bộ chọn nhất định, như trái ngược với việc tách logic giữa các quy tắc validate và hộp kiểm trình xử lý nhấp chuột. Tôi đặt cùng một số quick demo về cách tôi thực hiện việc này bằng cách sử dụng đánh dấu của bạn.

Thực sự, nó cuộn xuống required:'#OneSelected:checked'. Điều này làm cho trường được đề cập chỉ bắt buộc nếu biểu thức là đúng.Trong bản demo, nếu bạn gửi trang ngay lập tức, nó hoạt động, nhưng khi bạn chọn hộp, biểu mẫu không thể gửi cho đến khi các trường được chọn được điền với một số đầu vào. Bạn vẫn có thể thực hiện cuộc gọi .valid() trong trình xử lý nhấp chuột của hộp kiểm nếu bạn muốn toàn bộ biểu mẫu xác thực khi nhấp chuột.

(Ngoài ra, tôi rút ngắn lên hộp kiểm của bạn chuyển đổi qua lại một chút, tận dụng các tính năng chaining tuyệt vời của jQuery, mặc dù bạn "bộ nhớ đệm" để textBox chỉ là có hiệu quả.)

+1

+1 cho giải pháp thanh lịch, một vấn đề với nó: nếu bạn bỏ chọn hộp kiểm sau khi cố gắng gửi - thông báo lỗi sẽ không biến mất. giải quyết nó bằng cách xóa thông báo lỗi khi vô hiệu hóa trường, sẽ viết nó trong một câu trả lời riêng biệt vì định dạng trong các nhận xét là crap –

2

Phụ thuộc tham số không hoạt động một cách chính xác, tôi giả sử tài liệu đã lỗi thời. Tôi đã thực hiện được thao tác này như sau:

required : function(){ return $("#register").hasClass("open")} 
0

Tôi gặp vấn đề tương tự.

Tôi đã giải quyết vấn đề này bằng cách thực hiện cuộc gọi xử lý sự kiện thay đổi nút radio hợp lệ() trên toàn bộ biểu mẫu.

Làm việc hoàn hảo. Các giải pháp khác ở trên không hiệu quả với tôi.

1

Sau @Collin Allen câu trả lời:

Vấn đề là nếu bạn bỏ chọn hộp kiểm khi nó thông báo lỗi có thể nhìn thấy, thông báo lỗi không biến mất.

Tôi đã giải quyết nó bằng cách xóa thông báo lỗi khi vô hiệu hóa trường.

Hãy giới thiệu Collin và làm cho những thay đổi sau đây cho phép/vô hiệu hóa quá trình:

jQuery('#ItemList :checkbox').click(function() 
{ 
    var jqTxb = $(this).siblings(':text') 
    if ($(this).attr('checked')) 
    {  
     jqTxb.removeAttr('disabled').focus(); 
    } 
    else 
    { 
     jqTxb.attr('disabled', 'disabled').val(''); 
     var obj = getErrorMsgObj(jqTxb, ""); 
     jqTxb.closest("form").validate().showErrors(obj); 
    } 
}); 
function getErrorMsgObj(jqField, msg) 
{ 
    var obj = {}; 
    var nameOfField = jqField.attr("name"); 
    obj[nameOfField] = msg; 
    return obj; 
} 

Bạn có thể thấy tôi quyết tâm loại bỏ các thông báo lỗi từ lĩnh vực này khi tắt nó

Và nếu bạn đang lo lắng khoảng $("form").validate(), đừng! Nó không xác nhận lại biểu mẫu nó chỉ trả về đối tượng API của xác thực jQuery.

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