it-swarm.com.ru

Как очистить сообщения об ошибках проверки 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
    }
}
154
Vicky

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

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

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

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

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

186
Parrots

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

    минимизируется как расширение jQuery:

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

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

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

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

    55
    Nick Craver

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

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

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

    34
    Juri

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

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

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

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

    Есть ошибки, опубликованные на этом.

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

    16
    Meower68

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

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

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

    var validator = $('#Form').validate();
    
    validator.submitted = {};
    validator.prepareForm();
    validator.hideErrors();
    validator.elements().removeClass(validatorObject.settings.errorClass);
    
    5
    Chintsu

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

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

    Для тех, кто использует 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(); });
    
    4
    Xawery Wiśniowiecki

    Я проверил с:

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

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

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

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

    1
    kiran

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

    validator.hideThese(validator.errors());
    
    1
    jlh

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

     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);
                    }
                } 
            }
    
    0
    sunny goyal

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

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

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

    $('div#errorMessage').css('display', 'none');
    
    $('div#errorMessage').css('display', 'block');  
    
    0
    shathar khan

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

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

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

    Решение было достигнуто путем сравнения разметки 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');
    

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

    0
    peter the programming god

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

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

    С помощью:

    jquery-validate/1.16.0
    
    jquery-validation-unobtrusive/3.2.6/
    
    0
    Artur Kędzior

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

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

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

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

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

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

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

    0
    michaelhsilva9944

    $(FORM_ID).validate().resetForm(); по-прежнему не работает должным образом.

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

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

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

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

    0
    Parixit

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

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

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

    0
    ZhukovRA

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

    this.invalid = {};
    
    0
    Maximus

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