2012-04-17 30 views
6

Tôi đang sử dụng jQuery Validation PluginjQuery Validation hiển thị lỗi như inline theo mặc định, cần phải thay đổi điều này để inline-block

Làm thế nào để thay đổi các thông báo lỗi được tạo ra giá trị cho displayinline-block khi không ẩn?

Tôi đã thử với CSS nhưng jQuery ghi đè lên điều này.

+0

Mã của bạn ở đâu? Anh đã làm gì cho đến nay? – Sparky

+0

Xin chào, rất tiếc, đây là dự án nội bộ nên tôi không thể chuyển bạn đến một liên kết. Tôi đang cố gắng tìm nơi jquery cho biết mã để thêm hiển thị: inline vào nhãn lỗi khi được hiển thị và thay đổi để hiển thị: inline-block –

+0

Tôi không yêu cầu bạn đăng liên kết. Không kém, chỉ cần nhìn vào bên trong plugin và tùy chỉnh khi cần ... nó chỉ là jQuery/JavaScript. – Sparky

Trả lời

4

Sử dụng tùy chọn errorClass để xác định các lớp giao cho thông báo lỗi và các yếu tố lỗi:

$(".selector").validate({ 
    errorClass: "invalid" 
}) 

<style type="text/css"> 
    .invalid { 
    display: inline-block !important; 
    } 
</style> 

Xem tài liệu về các tùy chọn trình xác thực:

http://docs.jquery.com/Plugins/Validation/validate#options

+4

Với điều này, không thể cho các lỗi bị ẩn sau khi trường hợp lệ là – jetlej

+1

Đồng ý với @jetlej, Chức năng này xác thực bị hỏng như hiển thị: không có plugin nào tạo ra để ẩn thông báo lỗi xác thực không cần thiết không còn được chú ý do điều quan trọng. –

0

Nếu bạn sử dụng !important trên CSS của bạn, cần được ưu tiên hơn những gì jQuery làm:

.error { 
    display: inline-block !important; 
} 
+0

Cảm ơn tôi đã thử nhưng nó không hoạt động –

+0

Hmm, làm việc cho tôi ... Bạn đã xem Firebug hay một trình gỡ lỗi khác để xem kiểu nào được áp dụng và cái gì khiến cho 'inline-block' không được áp dụng? –

+0

Kiểu nội tuyến từ plugin sẽ ghi đè CSS –

0

Xác thực jQuery không có bất kỳ kiểu CSS nào được xác định. Bạn có đang sử dụng bất kỳ thư viện nào khác có định nghĩa CSS cho lớp "lỗi" không?

Đây là JsFiddle mẫu mã với jQuery xác nhận sử dụng inline-block cho thông báo lỗi:

http://jsfiddle.net/maxim75/HKnQD/4/

.error 
{ 
    color: Red; 
    display: inline-block; 
}​ 

mở nó lên và kiểm tra trong trình duyệt của bạn:

enter image description here

+0

Xin chào, cảm ơn, tôi đã nhận ra điều này ngày hôm qua khi kiểm tra các câu trả lời tôi nhận được. Chúc mừng –

5

Tôi chạy vào điều này và không thể sử dụng CSS như jQuery đang sử dụng các phương thức show() và hide() trên phần tử lỗi (mà đặt "display: block;" inline) sau khi tạo ban đầu. Thay vào đó, bạn có thể sử dụng các phương thức đánh dấu và phương pháp unhighlight của trình duyệt xác thực để thay đổi css nội tuyến.

errorElement: 'em', 

highlight: function(element, errorClass) { 
    $(element).addClass(errorClass); // good for changing field backgrounds 
    $(element).next('em').css('display','inline'); // keeps error message layout clean 
}, 

unhighlight: function(element, errorClass) { 
     $(element).removeClass(errorClass); // good for changing field backgrounds 
     $(element).next('em').css('display','none'); // keeps error message layout clean 
}, 
+0

Cảm ơn anh bạn. Chúc mừng –

+0

Đây là câu trả lời đúng – hamishtaplin

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