Làm cách nào để xóa các lỗi xác thực phía máy khách MVC khi nút hủy được nhấp khi người dùng đã vô hiệu hóa biểu mẫu?

Question

Tôi có một chế độ xem một phần được hiển thị trong chế độ xem chính. Chế độ xem một phần tận dụng lợi thế của System.ComponentModel.DataAnnotations và Html.EnableClientValidation().

Một liên kết được nhấp và div chứa chế độ xem một phần được hiển thị trong một số JQuery.Dialog().

Tôi sau đó nhấp vào nút lưu mà không cần nhập bất kỳ văn bản nào vào trường nhập được xác thực của tôi. Điều này làm cho xác nhận hợp lệ phía khách hàng kích hoạt như mong đợi và hiển thị thông báo '* required' bên cạnh trường không hợp lệ.

Khi nhấn nút hủy, tôi muốn đặt lại xác nhận MVC phía máy khách về trạng thái mặc định của nó và xóa mọi thư, sẵn sàng khi người dùng mở lại hộp thoại. Có cách nào được khuyến nghị thực hiện việc này không?

Answer 1

Câu trả lời này dành cho MVC3. Xem ý kiến ​​dưới đây để được giúp đỡ cập nhật nó để MVC 4 và 5

Nếu bạn chỉ muốn xóa validation-thông điệp để họ không được hiển thị cho người sử dụng, bạn có thể làm điều đó với javascript như sau:

function resetValidation() { 
     //Removes validation from input-fields 
     $('.input-validation-error').addClass('input-validation-valid'); 
     $('.input-validation-error').removeClass('input-validation-error'); 
     //Removes validation message after input-fields 
     $('.field-validation-error').addClass('field-validation-valid'); 
     $('.field-validation-error').removeClass('field-validation-error'); 
     //Removes validation summary 
     $('.validation-summary-errors').addClass('validation-summary-valid'); 
     $('.validation-summary-errors').removeClass('validation-summary-errors'); 

    } 

Nếu bạn cần đặt lại để chỉ hoạt động trong cửa sổ bật lên của mình, bạn có thể làm như sau:

function resetValidation() { 
     //Removes validation from input-fields 
     $('#POPUPID .input-validation-error').addClass('input-validation-valid'); 
     $('#POPUPID .input-validation-error').removeClass('input-validation-error'); 
     //Removes validation message after input-fields 
     $('#POPUPID .field-validation-error').addClass('field-validation-valid'); 
     $('#POPUPID .field-validation-error').removeClass('field-validation-error'); 
     //Removes validation summary 
     $('#POPUPID .validation-summary-errors').addClass('validation-summary-valid'); 
     $('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors'); 

    } 

Tôi hy vọng đây là hiệu ứng bạn tìm kiếm.

Answer 2

Cảm ơn bạn. Tôi đã có một câu hỏi tương tự cho một kịch bản hơi khác. Tôi có một màn hình khi bạn nhấp vào một trong các nút gửi nó tải xuống một tệp. Trong MVC khi bạn trả về một tệp để tải xuống, nó không chuyển đổi màn hình, vì vậy bất kỳ thông báo lỗi nào đã có trong bản tóm tắt xác thực vẫn tồn tại mãi mãi. Tôi chắc chắn không muốn các thông báo lỗi ở lại đó sau khi biểu mẫu đã được gửi lại. Nhưng tôi cũng không muốn xóa các xác nhận hợp lệ ở cấp độ trường được đánh dấu ở phía máy khách khi nhấn nút gửi. Ngoài ra, một số quan điểm của tôi có nhiều hơn một biểu mẫu trên chúng.

Tôi đã thêm mã sau đây (nhờ bạn) ở cuối trang Site.Master để nó áp dụng cho tất cả các chế độ xem của tôi.

<!-- This script removes just the summary errors when a submit button is pressed 
    for any form whose id begins with 'form' --> 
<script type="text/javascript"> 
    $('[id^=form]').submit(function resetValidation() { 
     //Removes validation summary 
     $('.validation-summary-errors').addClass('validation-summary-valid'); 
     $('.validation-summary-errors').removeClass('validation-summary-errors'); 
    }); 
</script> 

Xin cảm ơn một lần nữa.

Answer 3

Bạn có thể nhấn vào các phương thức thư viện xác thực để thực hiện việc này. Có hai đối tượng quan tâm: FormContext và FieldContext. Bạn có thể truy cập vào số FormContext qua thuộc tính __MVC_FormValidation của biểu mẫu và một FieldContext mỗi thuộc tính được xác thực qua thuộc tính fields của FormContext.

Vì vậy, để xóa lỗi xác nhận, bạn có thể làm một cái gì đó như thế này để một form:

var fieldContexts = form.__MVC_FormValidation.fields; 
for(i = 0; i < fieldContexts.length; i++) { 
    var fieldContext = fieldContexts[i]; 
    // Clears validation message 
    fieldContext.clearErrors(); 
} 
// Clears validation summary 
form.__MVC_FormValidation.clearErrors(); 

Sau đó, bạn có thể treo rằng đoạn mã để bất cứ sự kiện mà bạn cần.

Nguồn cho điều này (khá không có giấy tờ) cái nhìn sâu sắc:

• http://bradwilson.typepad.com/presentations/advanced-asp-net-mvc-2.pdf (Mentions FieldContext)
• https://stackoverflow.com/a/3868490/525499 (Đối với chỉ ra this link, mà metions làm thế nào để kích hoạt xác nhận client-side qua javascript)

Answer 4

Nếu bạn đang sử dụng tính năng xác thực không phô trương đi kèm với MVC, bạn có thể chỉ cần thực hiện:

$.fn.clearErrors = function() { 
    $(this).each(function() { 
     $(this).find(".field-validation-error").empty(); 
     $(this).trigger('reset.unobtrusiveValidation'); 
    }); 
}; 

--------------------------------------------- ---------------------------

Bên thứ ba sửa: Điều này chủ yếu làm việc trong trường hợp của tôi, nhưng tôi phải loại bỏ dòng $(this).find(".field-validation-error").empty();. Điều này dường như ảnh hưởng đến việc hiển thị lại các thông báo xác thực khi gửi lại.

tôi sử dụng như sau:

$.fn.clearErrors = function() { 
     $(this).each(function() { 
      $(this).trigger('reset.unobtrusiveValidation'); 
     }); 
    }; 

và sau đó gọi nó như thế này:

$('#MyFormId input').clearErrors(); 

Answer 5

function resetValidation() { 

    $('.field-validation-error').html(""); 

} 

Answer 6

Để hoàn thành rõ ràng các đồ tạo tác xác nhận bao gồm tin nhắn, màu sắc hình nền của trường đầu vào và đường viền màu xung quanh trường nhập, tôi cần sử dụng mã sau đây, trong trường hợp này (trong trường hợp của tôi) một hộp thoại Bootstrap có chứa một dạng được nhúng.

$(this).each(function() { 
    $(this).find(".field-validation-error").empty(); 
    $(this).find(".input-validation-error").removeClass("input-validation-error"); 
    $(this).find(".state-error").removeClass("state-error"); 
    $(this).find(".state-success").removeClass("state-success"); 
    $(this).trigger('reset.unobtrusiveValidation'); 
}); 

Answer 7

Ở đây bạn có thể sử dụng chỉ cần loại bỏ thông báo lỗi

$('.field-validation-valid span').html('') 

HOẶC

$('.field-validation-valid span').text('')