Plugin xác thực jQuery - không có thông báo lỗi thay vào đó nền tùy chỉnh

Question

Tôi đang sử dụng plugin xác thực jQuery (http://docs.jquery.com/Plugins/validation). Biểu mẫu đang được xác thực có hình nền tùy chỉnh cho trường nhập văn bản, do đó thay vì hiển thị thông báo lỗi cho trường không hợp lệ, tôi muốn thay đổi hình nền. Làm cho mọi thứ phức tạp hơn một chút là hình nền cho các trường nằm trên một khác nhau div hoàn toàn được đặt phía sau trường văn bản (có nền trong suốt và không có đường viền). Tôi sẽ phụ thuộc vào những lý do cho quyết định thiết kế này ở đây (nó liên quan đến lợi nhuận trong lĩnh vực văn bản) nhưng tôi nghĩ rằng nó nên được đề cập vì nó là rất quan trọng cho câu hỏi này.

Vì vậy, tôi có hai câu hỏi:

1. Làm thế nào tôi có thể ngăn chặn việc hiển thị các thông báo lỗi tất cả lại với nhau?

2. Làm cách nào để thay thế plugin xác thực nếu, ví dụ: trường tên (ví dụ: <input id=name ... />) không hợp lệ, nên thay đổi nền cho div có liên quan (ví dụ: <div id=name-bg... ></div>)?

Cảm ơn bạn đã được trợ giúp!

Answer 1

Làm thế nào tôi có thể ngừng hiển thị các thông báo lỗi tất cả cùng nhau?

Bạn có thể thực hiện điều này bằng cách sử dụng các showErrors lựa chọn của các plugin Validate:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
      /* Custom error-handling code here */ 
     } 
    } 
}); 

Đối số errorList là danh sách các đối tượng, từng chứa một tài sản là yếu tố với lỗi DOM element.

Làm thế nào tôi có thể thay vì nói với các plugin xác nhận nếu, ví dụ, tên trường không hợp lệ thì nên thay đổi nền cho div có liên quan?

Sử dụng showErrors tùy chọn và errorList luận chi tiết ở trên, bạn có thể thực hiện điều này như thế này:

$("#commentForm").validate({ 
    showErrors: function(errorMap, errorList) { 
     var i, length = errorList.length; 
     var el; 

     for (i = 0; i < length; i++) { 
      el = errorList[i].element; 
      /* Build up a selector based on the element containing and error's id:*/ 
      $("#" + el.id + "-bg").show() // <-- write code against this selector 
     } 
    } 
}); 

Dưới đây là một bằng chứng của khái niệm: http://jsfiddle.net/vD5cQ/

Hy vọng rằng sẽ giúp!