Как удалить сообщения об ошибках проверки JQuery?

Я использую плагин проверки jQuery для проверки на стороне клиента. Функция editUser()вызывается нажатием кнопки «Редактировать пользователя», которая отображает сообщения об ошибках.

Но я хочу удалить сообщения об ошибках в моей форме, когда я нажимаю кнопку «Очистить», которая вызывает отдельную функцию 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
    }
}

Вы хотите resetForm()метод:

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

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

Я взял это из источника одного из их демо .

Примечание. Этот код не будет работать для Bootstrap 3.

Я сам сталкивался с этой проблемой. Мне нужно было условно проверить части формы, пока форма строилась на основе шагов (то есть некоторые входные данные были динамически добавлены во время выполнения). В результате иногда выпадающий список требует проверки, а иногда - нет. Однако, к концу испытания это должно было быть подтверждено. В результате мне понадобился надежный метод, который не был обходным путем. Я сверился с исходным кодом для jquery.validate.

Вот что я придумал:

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();

Если вы хотите просто скрыть ошибки:

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

Если вы указали errorClass, то вместо этого вызовите этот класс error(по умолчанию), который я использовал выше.

Если вы ранее не сохраняли валидаторы отдельно, прикрепляя их к форме, вы также можете просто вызвать

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

as .validate()вернет те же валидаторы, которые вы добавили ранее (если вы это сделали).

Если вы хотите сделать это без использования отдельной переменной, то

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

К сожалению, validator.resetForm()не работает, во многих случаях.

У меня есть случай, когда, если кто-то нажимает «Отправить» в форме с пустыми значениями, он должен игнорировать «Отправить». Нет ошибок Это достаточно просто. Если кто-то вводит частичный набор значений и нажимает «Отправить», он должен пометить некоторые поля ошибками. Однако, если они стирают эти значения и снова нажимают «Отправить», это должно устранить ошибки. В этом случае по какой-то причине в массиве «currentElements» нет элементов в валидаторе, поэтому выполнение .resetForm()абсолютно ничего не дает.

На этом есть сообщения об ошибках.

До тех пор, пока они их не исправят, вам нужно использовать ответ Ника Крейвера, а НЕ принятый ответ Попугаев.

Ты можешь использовать:

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

Я думаю, что нам просто нужно ввести входы, чтобы очистить все

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

Если вы хотите просто очистить метки проверки, вы можете использовать код из jquery.validate.js resetForm ()

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

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

Для тех, кто использует Bootstrap 3, код ниже будет чистить всю форму: сообщения, значки и цвета ...

$('.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(); });

Я проверил с:

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

Все будет хорошо, когда вам нужно будет подтвердить это снова.

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

Это уничтожит все ошибки проверки

В моем случае помог с подходом:

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

Если вы хотите скрыть проверку на стороне клиента, которая не является частью отправки формы, вы можете использовать следующий код:

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

Пробовал каждый ответ. Единственное, что сработало для меня, было:

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

С помощью:

jquery-validate/1.16.0

jquery-validation-unobtrusive/3.2.6/

Ни одно из других решений не помогло мне. resetForm()четко задокументировано для сброса фактической формы, например, удаление данных из формы, что не то, что я хочу. Иногда случается так, что иногда не делают этого, а просто удаляют ошибки. Что в итоге сработало для меня, так это:

validator.hideThese(validator.errors());

Попробуйте использовать это для удаления проверки по нажатию на кнопку отмены

 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);
                }
            } 
        }

Попробуй использовать:

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

на кнопку Очистить.

Чтобы удалить резюме проверки, вы можете написать это

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

Однако, как только вы удалили, снова, если проверка не удалась, она не будет отображать эту сводку проверки, потому что вы удалили ее. Вместо этого используйте скрыть и отобразить с помощью приведенного ниже кода

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

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

Ни одно из вышеперечисленных решений не помогло мне. Я был разочарован тратить свое время на них. Однако есть простое решение.

Решение было достигнуто путем сравнения разметки HTML для допустимого состояния и разметки HTML для состояния ошибки.

Никаких ошибок не произойдет:

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

при возникновении ошибки этот div заполняется ошибками, а класс изменяется на validation-summary-errors:

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

Решение очень простое. Очистите HTML-код div, который содержит ошибки, а затем верните класс в правильное состояние.

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

Удачного кодирования.

Если вы также хотите выполнить сброс, numberOfInvalids()добавьте следующую строку в resetFormфункцию в jquery.validate.jsномер строки файла: 415.

this.invalid = {};

я только что сделал

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

удалить красную рамку на полях ошибок ввода.

$(FORM_ID).validate().resetForm(); все еще не работает, как ожидалось.

Я очищаю форму с resetForm(). Это работает во всех случаях, кроме одного!

Когда я загружаю любую форму через Ajax и применяю валидацию формы после загрузки моей динамики HTML, то после того, как я пытаюсь сбросить форму с помощью, resetForm()и она не удается, а также она сбрасывает все проверки, которые я применяю к элементам формы.

Поэтому, пожалуйста, не используйте это для загруженных Ajax форм ИЛИ инициализированной вручную проверки.

PS Вам нужно использовать ответ Ника Крейвера для такого сценария, как я объяснил.

validator.resetForm()Метод очистки текста ошибки. Но если вы хотите удалить КРАСНУЮ границу из полей, вы должны удалить классhas-error

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

Функция с использованием подходов Трэвиса J , JLewkovich и 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"));

Напишите собственный код, потому что все используют разные имена классов. Я сбрасываю проверку JQuery по этому коду.

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