Як очистити повідомлення про помилки перевірки 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();

як .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 заповнюється помилками, і клас змінюється на валідацію-підсумки-помилки:

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

Рішення дуже просте. Очистіть HTML розділу, який містить помилки, а потім змініть клас назад у дійсний стан.

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

Функція за допомогою підходів Тревіса Дж , Ю. Левковича та Ніка Крейвера ...

// 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');