jQuery xác thực plugin - showErrors option - errorContainer không ẩn/hiển thị

Question

Tôi đã cố gắng để có được một giải pháp xác thực hợp lệ để làm việc cho trang web của mình, nhưng tôi đang gặp sự cố với các tùy chọn khác nhau. Tôi đã đọc kỹ tài liệu và xem các ví dụ, nhưng tôi vẫn gặp vấn đề.

Biểu mẫu của tôi nằm trong một bảng. Tôi muốn mỗi hàng có hàng lỗi riêng của nó bên dưới nó, thường sẽ bị ẩn, nhưng nó sẽ hiển thị cho mỗi hàng khi thích hợp.

Các tùy chọn sau giấu và cho thấy các hàng lỗi tốt, nhưng được thông báo lỗi thể hiện trong mỗi hàng lỗi là toàn bộ nối của tất cả các thông báo lỗi:

$('#myform').validate({ 
    rules: { 
     firstName: "required", 
     lastName: "required" 
    }, 
    messages: { 
     firstName: "Enter your first name.", 
     lastName: "Enter your last name." 
    }, 
    errorContainer: '.errorRow', 
    errorLabelContainer: '.errorRow.appValueColumn', 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent().next()); 
    } 
}); 

vì vậy tôi đã cố gắng để sử dụng tùy chọn showErrors như sau :

$('#myform').validate({ 
     rules: { 
      firstName: "required", 
      lastName: "required" 
     }, 
     messages: { 
      firstName: "Enter your first name.", 
      lastName: "Enter your last name." 
     }, 
     errorContainer: '.errorRow', 
     errorContainer: '.errorRow.appValueColumn', 
     showErrors: function(errorMap, errorList) { 
     $.each(errorMap, function(key, value) { 
     $('#'+key).parent().next().children('.appValueColumn').html(errorMap[key]); 
}); 

Vâng, giờ đây tất cả các lỗi đều được phân tách và hiển thị đúng vị trí, nhưng tôi không thể hiển thị .errorRows. Tôi làm gì sai ở đây?

Rất cám ơn

Answer 1

Nếu bạn nhìn vào nguồn gốc của các plugin xác nhận đối với phương pháp showErrors, bạn có:

this.settings.showErrors 
      ? this.settings.showErrors.call(this, this.errorMap, this.errorList) 
      : this.defaultShowErrors(); 

Điều này có nghĩa rằng nếu bạn cung cấp một handler tùy chỉnh cho phương pháp này, mặc định hành vi không được thực hiện.

Bạn có thể một trong hai this.defaultShowErrors call() vào cuối handler showErrors riêng của bạn, mà sẽ trở thành:

showErrors: function(errorMap, errorList) { 
    $.each(errorMap, function(key, value) { 
     $('#'+key).parent().next().children('.appValueColumn') 
        .html(errorMap[key]); 
    }); 
    this.defaultShowErrors(); 
}); 

Hope this helps!

Answer 2

Hãy chắc chắn rằng bạn sử dụng classname mà không có sự chấm hàng đầu trên những dòng này:

errorContainer: 'errorRow', 
errorLabelContainer: 'errorRow appValueColumn',