Xác thực Jquery - hiển thị tóm tắt xác thực trong quá trình xác thực mong muốn?

Question

Có thể nhận được xác nhận jquery để hiển thị tóm tắt xác thực bằng cách sử dụng xác nhận háo hức không?

Tôi đang sử dụng MVC 3 (nếu vấn đề) và các hình thức của tôi xác nhận khi mỗi phần tử mất tập trung:

$('#myform').validate({ onfocusout: function(element) { $(element).valid(); } }; 

Điều này cho thấy sai sót cá nhân trên từng lĩnh vực, tuy nhiên tôi cũng muốn thể hiện những sai sót trong khối tóm tắt xác thực. Tuy nhiên, bản tóm tắt xác thực đó chỉ xuất hiện khi biểu mẫu được gửi, chứ không phải trên tiêu điểm bị mất.

Tôi đã thử gắn vào showErrors, tuy nhiên, điều đó chỉ cho tôi lỗi trường hiện tại, không phải danh sách lỗi hiện tại.

---

Để hoàn chỉnh, đây là đoạn code có dạng:

@using (Ajax.BeginForm(...)) 
{ 

    <div class="field-panel"> 
    @Html.EditorFor(m => m.PatientID) 
    ... 

    </div> 
    <input type="submit" class="carecon-button-next" value="Next" /> 
    @Html.ValidationSummary(null, new { @class = "validation-summary" }) 
} 

Answer 1

Ok, tôi nghĩ tôi đã hiểu điều này.

Vấn đề thực sự là do sử dụng xác thực không phô trương với MVC 3, vì nó khởi tạo xác thực jQuery cho bạn Vì vậy, cách duy nhất để định cấu hình xác thực là sử dụng form.data("validator").settings. Tuy nhiên, cố gắng để thiết lập errorLabelContainer qua phương pháp này, ví dụ:

$("#form").data("validator").settings.errorLabelContainer = "#messageBox"; 

... không làm việc, bởi vì xác nhận của jQuery chỉ sử dụng giá trị này trong nội bộ trong nó init function(), để cấu hình một loạt các thiết lập khác như container, vv Tôi đã thử mô phỏng nó, hoặc thậm chí gọi $("#form").data("validator").init() một lần nữa sau khi thiết lập errorLabelContainer, nhưng làm như vậy gây ra hành vi kỳ lạ và hosed một loạt các thiết lập khác.

Vì vậy, tôi đã thực hiện một cách tiếp cận khác.Trước tiên, tôi cung cấp một nơi để MVC để đưa vào các chuỗi lỗi cá nhân sử dụng @Html.ValidationMessageFor(), và thêm display:none để giữ cho nó ẩn:

@using (Ajax.BeginForm(...)) 
{ 

    <div class="field-panel"> 
    @Html.EditorFor(m => m.PatientID) 
    @Html.ValidationMessageFor(m => m.PatientID, null, new { style = "display:none"}) 
    ... 

    </div> 
    <input type="submit" class="carecon-button-next" value="Next" /> 
    <ul id="error-summary"> 
    </ul> 
} 

Sau đó, trong showErrors gọi lại, tôi sao chép các chuỗi trong bản tóm tắt xác nhận sau gọi defaultShowErrors():

$("#form").data("validator").settings.onfocusout = function (element) { $(element).valid(); }; 
    $("#form").data("validator").settings.showErrors = function (errorMap, errorList) { 
     this.defaultShowErrors(); 
     $("#error-summary").empty(); 
     $(".field-validation-error span", $("#form")) 
      .clone() 
      .appendTo("#error-summary") 
      .wrap("<li>"); 

    }; 

này đã cho tôi hành vi của tôi muốn, hiển thị/ẩn các lỗi xác nhận như một danh sách trong phần tóm tắt như người dùng điền vào các lĩnh vực trên biểu mẫu.

Answer 2

Đây là từ demo page; invalidHandler và mã để tạo tóm tắt lỗi. Nhưng nó được kích hoạt trên form gửi mà không phải là những gì bạn yêu cầu.

invalidHandler: function(e, validator) { 
    var errors = validator.numberOfInvalids(); 
     if (errors) { 
      var message = errors == 1 
       ? 'You missed 1 field. It has been highlighted below' 
       : 'You missed ' + errors + ' fields. They have been highlighted below'; 
       $("div.error span").html(message); 
       $("div.error").show(); 
     } else { 
      $("div.error").hide(); 
     } 
}, 

Tuy nhiên, phương pháp errorLabelContainer: không đòi hỏi form trình. As per the documentation, "Tất cả các nhãn lỗi được hiển thị bên trong danh sách không có thứ tự với ID" messageBox ", như được chỉ định bởi bộ chọn được chuyển thành tùy chọn errorContainer. Tất cả các phần tử lỗi được bao bên trong phần tử li, để tạo danh sách thư."

errorLabelContainer: "#messageBox", 

Đây là một bản demo thô hiện xác nhận sử dụng onfocusout. Không có nút gửi để chứng minh điểm này. #messageBox tích lũy tất cả thư khi chúng được thu thập.

http://jsfiddle.net/sparky672/bAN2Q/

Answer 3

Tôi đã gặp rắc rối tương tự và đã viết này, nó có vẻ như một cách dễ dàng để có được hành vi mà bạn đang tìm kiếm:

function EnableEagerValidation(){ 
    var itemsNeedingValidation = $('*[data-val="true"]'); 
    itemsNeedingValidation.each(function() { 
     $(this).blur(function(){$(this).closest("form").valid();}); 
    }); 
}