Làm thế nào để xóa thông báo lỗi xác thực jQuery?

Tôi đang sử dụng plugin xác thực jQuery để xác thực phía máy khách. Chức năng editUser()được gọi khi nhấp vào nút 'Chỉnh sửa người dùng', hiển thị thông báo lỗi.

Nhưng tôi muốn xóa thông báo lỗi trên biểu mẫu của mình, khi tôi nhấp vào nút 'Xóa', đó sẽ gọi một chức năng riêng clearUser().

function clearUser() {
    // Need to clear previous errors here
}

function editUser(){
    var validator = $("#editUserForm").validate({
        rules: {
            userName: "required"
        },
        errorElement: "span",
        messages: {
            userName: errorMessages.E2
        }
    });

    if(validator.form()){
        // Form submission code
    }
}

Bạn muốn resetForm()phương thức:

var validator = $("#myform").validate(
   ...
   ...
);

$(".cancel").click(function() {
    validator.resetForm();
});

Tôi lấy nó từ nguồn của một trong những bản demo của họ .

Lưu ý: Mã này sẽ không hoạt động cho Bootstrap 3.

Tôi đã đi qua vấn đề này bản thân mình. Tôi có nhu cầu xác nhận có điều kiện các phần của biểu mẫu trong khi biểu mẫu đang được xây dựng dựa trên các bước (nghĩa là các đầu vào nhất định được nối động trong thời gian chạy). Kết quả là, đôi khi một danh sách thả xuống chọn sẽ cần xác nhận, và đôi khi không. Tuy nhiên, vào cuối thử thách, nó cần phải được xác nhận. Kết quả là, tôi cần một phương pháp mạnh mẽ mà không phải là một cách giải quyết. Tôi đã tham khảo mã nguồn cho jquery.validate.

Đây là những gì tôi đã đưa ra:

function clearValidation(formElement){
 //Internal $.validator is exposed through $(form).validate()
 var validator = $(formElement).validate();
 //Iterate through named elements inside of the form, and mark them as error free
 $('[name]',formElement).each(function(){
   validator.successList.push(this);//mark as error free
   validator.showErrors();//remove error messages if present
 });
 validator.resetForm();//remove error class on name elements and clear history
 validator.reset();//remove all error and success data
}
//used
var myForm = document.getElementById("myFormId");
clearValidation(myForm);

$.fn.clearValidation = function(){var v = $(this).validate();$('[name]',this).each(function(){v.successList.push(this);v.showErrors();});v.resetForm();v.reset();};
//used:
$("#formId").clearValidation();

Nếu bạn chỉ muốn ẩn các lỗi:

$("#clearButton").click(function() {
  $("label.error").hide();
  $(".error").removeClass("error");
});

Nếu bạn đã chỉ định errorClass, hãy gọi lớp đó để ẩn thay thế error(mặc định) tôi đã sử dụng ở trên.

Nếu trước đây bạn không lưu các trình xác nhận khi gắn chúng vào biểu mẫu, bạn cũng có thể chỉ cần gọi

$("form").validate().resetForm();

như .validate()sẽ trả về cùng các trình xác nhận bạn đã đính kèm trước đó (nếu bạn đã làm như vậy).

Nếu bạn muốn làm điều đó mà không sử dụng một biến riêng biệt thì

$("#myForm").data('validator').resetForm();

Thật không may, validator.resetForm()KHÔNG hoạt động, trong nhiều trường hợp.

Tôi có một trường hợp, nếu ai đó nhấn "Gửi" trên một biểu mẫu có giá trị trống, thì nên bỏ qua "Gửi". Không có lỗi. Điều đó đủ dễ dàng. Nếu ai đó đặt vào một bộ giá trị và nhấn "Gửi", thì nó sẽ gắn cờ một số trường có lỗi. Tuy nhiên, nếu họ xóa sạch các giá trị đó và nhấn "Gửi" lần nữa, nó sẽ xóa các lỗi. Trong trường hợp này, vì một số lý do, không có phần tử nào trong mảng "currentElements" trong trình xác nhận hợp lệ, vì vậy việc thực thi .resetForm()hoàn toàn không có gì.

Có lỗi đăng trên này.

Cho đến khi họ sửa chúng, bạn cần sử dụng câu trả lời của Nick Craver, KHÔNG phải là câu trả lời được chấp nhận của Vẹt.

Bạn có thể dùng:

$("#myform").data('validator').resetForm();

Tôi nghĩ rằng chúng ta chỉ cần nhập các đầu vào để làm sạch mọi thứ

$("#your_div").click(function() {
  $(".error").html('');
  $(".error").removeClass("error");
});

Nếu bạn chỉ muốn xóa nhãn xác thực, bạn có thể sử dụng mã từ jquery.validate.js resetForm ()

var validator = $('#Form').validate();

validator.submitted = {};
validator.prepareForm();
validator.hideErrors();
validator.elements().removeClass(validatorObject.settings.errorClass);

Đối với những người sử dụng mã Bootstrap 3 bên dưới sẽ xóa toàn bộ biểu mẫu: tin nhắn, biểu tượng và màu sắc ...

$('.form-group').each(function () { $(this).removeClass('has-success'); });
$('.form-group').each(function () { $(this).removeClass('has-error'); });
$('.form-group').each(function () { $(this).removeClass('has-feedback'); });
$('.help-block').each(function () { $(this).remove(); });
$('.form-control-feedback').each(function () { $(this).remove(); });

Tôi đã thử nghiệm với:

$("div.error").remove();
$(".error").removeClass("error");

Sẽ ổn thôi, khi bạn cần xác nhận lại.

var validator = $("#myForm").validate();
validator.destroy();

Điều này sẽ phá hủy tất cả các lỗi xác nhận

Trong trường hợp của tôi đã giúp với cách tiếp cận:

$(".field-validation-error span").hide();

Nếu bạn muốn ẩn xác thực ở phía máy khách không phải là một phần của biểu mẫu gửi, bạn có thể sử dụng mã sau đây:

$(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");

Đã thử từng câu trả lời. Điều duy nhất làm việc cho tôi là:

$("#editUserForm").get(0).reset();

Sử dụng:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Không có giải pháp nào khác làm việc cho tôi. resetForm()được ghi lại rõ ràng để đặt lại biểu mẫu thực tế, ví dụ: xóa dữ liệu khỏi biểu mẫu, đây không phải là điều tôi muốn. Nó chỉ xảy ra đôi khi không làm điều đó, nhưng chỉ cần loại bỏ các lỗi. Điều cuối cùng làm việc cho tôi là thế này:

validator.hideThese(validator.errors());

Cố gắng sử dụng điều này để loại bỏ xác nhận khi nhấp vào hủy bỏ

 function HideValidators() {
            var lblMsg = document.getElementById('<%= lblRFDChild.ClientID %>');
            lblMsg.innerHTML = "";           
            if (window.Page_Validators) {
                for (var vI = 0; vI < Page_Validators.length; vI++) {
                    var vValidator = Page_Validators[vI];
                    vValidator.isvalid = true;
                    ValidatorUpdateDisplay(vValidator);
                }
            } 
        }

Thử sử dụng:

onClick="$('.error').remove();"

trên nút Xóa.

Để xóa bản tóm tắt xác nhận, bạn có thể viết cái này

$('div#errorMessage').remove();

Tuy nhiên, một khi bạn đã xóa, một lần nữa nếu xác thực thất bại, nó sẽ không hiển thị tóm tắt xác thực này vì bạn đã xóa nó. Thay vào đó, sử dụng ẩn và hiển thị bằng mã dưới đây

$('div#errorMessage').css('display', 'none');

$('div#errorMessage').css('display', 'block');  

Không có giải pháp nào ở trên làm việc cho tôi. Tôi đã thất vọng vì lãng phí thời gian của mình cho họ. Tuy nhiên có một giải pháp dễ dàng.

Giải pháp đã đạt được bằng cách so sánh đánh dấu HTML cho trạng thái hợp lệ và đánh dấu HTML cho trạng thái lỗi.

Không có lỗi sẽ tạo ra:

        <div class="validation-summary-valid" data-valmsg-summary="true"></div>

khi xảy ra lỗi, div này được xác định là có lỗi và lớp được thay đổi thành lỗi xác thực-tóm tắt-lỗi:

        <div class="validation-summary-errors" data-valmsg-summary="true"> 

Giải pháp này rất đơn giản. Xóa HTML của div chứa lỗi và sau đó thay đổi lớp trở lại trạng thái hợp lệ.

        $('.validation-summary-errors').html()            
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-valid').removeClass('validation-summary-errors');

Chúc mừng mã hóa.

Nếu bạn cũng muốn thiết lập lại numberOfInvalids()thì hãy thêm dòng sau vào resetFormchức năng trong jquery.validate.jssố dòng tệp: 415.

this.invalid = {};

tôi vừa làm

$('.input-validation-error').removeClass('input-validation-error');

để loại bỏ đường viền màu đỏ trên các trường lỗi đầu vào.

$(FORM_ID).validate().resetForm(); vẫn không hoạt động như mong đợi.

Tôi đang xóa mẫu với resetForm(). Nó hoạt động trong mọi trường hợp ngoại trừ một !!

Khi tôi tải bất kỳ biểu mẫu nào qua Ajax và áp dụng xác thực biểu mẫu sau khi tải động của tôi HTML, sau đó khi tôi cố gắng đặt lại biểu mẫu resetForm()và nó không thành công và nó cũng xóa tất cả xác thực tôi đang áp dụng trên các phần tử biểu mẫu.

Vì vậy, vui lòng không sử dụng điều này cho các biểu mẫu được tải Ajax HOẶC xác thực khởi tạo thủ công.

Tái bút: Bạn cần sử dụng câu trả lời của Nick Craver cho kịch bản như tôi đã giải thích.

validator.resetForm()Phương pháp xóa văn bản lỗi. Nhưng nếu bạn muốn xóa đường viền ĐỎ khỏi các trường, bạn phải xóa lớphas-error

$('#[FORM_ID] .form-group').removeClass('has-error');

Chức năng sử dụng các phương pháp của Travis J , JLewkovich và Nick Craver ...

// NOTE: Clears residual validation errors from the library "jquery.validate.js". 
// By Travis J and Questor
// [Ref.: https://stackoverflow.com/a/16025232/3223785 ]
function clearJqValidErrors(formElement) {

    // NOTE: Internal "$.validator" is exposed through "$(form).validate()". By Travis J
    var validator = $(formElement).validate();

    // NOTE: Iterate through named elements inside of the form, and mark them as 
    // error free. By Travis J
    $(":input", formElement).each(function () {
    // NOTE: Get all form elements (input, textarea and select) using JQuery. By Questor
    // [Refs.: https://stackoverflow.com/a/12862623/3223785 , 
    // https://api.jquery.com/input-selector/ ]

        validator.successList.push(this); // mark as error free
        validator.showErrors(); // remove error messages if present
    });
    validator.resetForm(); // remove error class on name elements and clear history
    validator.reset(); // remove all error and success data

    // NOTE: For those using bootstrap, there are cases where resetForm() does not 
    // clear all the instances of ".error" on the child elements of the form. This 
    // will leave residual CSS like red text color unless you call ".removeClass()". 
    // By JLewkovich and Nick Craver
    // [Ref.: https://stackoverflow.com/a/2086348/3223785 , 
    // https://stackoverflow.com/a/2086363/3223785 ]
    $(formElement).find("label.error").hide();
    $(formElement).find(".error").removeClass("error");

}

clearJqValidErrors($("#some_form_id"));

Viết mã riêng vì mọi người sử dụng một tên lớp khác nhau. Tôi đang thiết lập lại xác nhận jQuery bằng mã này.

$('.error').remove();
        $('.is-invalid').removeClass('is-invalid');