Как очистить сообщения об ошибках проверки 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
}
}
30 ответов
Вы хотите 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);
минимизируется как расширение 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();
Если вы хотите просто скрыть ошибки:
$("#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");
Все будет хорошо, когда вам нужно будет подтвердить это снова.
Функция с использованием подходов Трэвиса J, JLewkovich и Nick Craver...
// NOTE: Clears residual validation errors from the library "jquery.validate.js".
// By Travis J and Questor
// [Ref.: https://stackru.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://stackru.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://stackru.com/a/2086348/3223785 ,
// https://stackru.com/a/2086363/3223785 ]
$(formElement).find("label.error").hide();
$(formElement).find(".error").removeClass("error");
}
clearJqValidErrors($("#some_form_id"));
Если вы хотите скрыть проверку на стороне клиента, которая не является частью отправки формы, вы можете использовать следующий код:
$(this).closest("div").find(".field-validation-error").empty();
$(this).removeClass("input-validation-error");
Ни одно из других решений не помогло мне. resetForm() четко задокументировано для сброса фактической формы, например, удаление данных из формы, что не то, что я хочу. Иногда случается так, что иногда этого не делают, а просто удаляют ошибки. Что в итоге сработало для меня, так это:
validator.hideThese(validator.errors());
Пробовал каждый ответ. Единственное, что сработало для меня, было:
$("#editUserForm").get(0).reset();
С помощью:
jquery-validate/1.16.0
jquery-validation-unobtrusive/3.2.6/
Я использую https://github.com/aspnet/jquery-validation-unobtrusive, и следующая функция очистила для меня ошибки проверки:
function clearFormValidations(formElement) {
$(formElement).validate().resetForm();
// reset unobtrusive validation summary, if it exists
$(formElement).find("[data-valmsg-summary=true]")
.removeClass("validation-summary-errors")
.addClass("validation-summary-valid")
.find("ul").empty();
// reset unobtrusive field level, if it exists
$(formElement).find("[data-valmsg-replace]")
.removeClass("field-validation-error")
.addClass("field-validation-valid")
.empty();
}
Применение:
// to clear the errors:
var myForm = document.getElementById('myFormId');
clearFormValidations(myForm);
// to validate again
var validator = $(myForm).validate();
validator.form();
Я нашел выше функции здесь
В моем случае помог с подходом:
$(".field-validation-error span").hide();
var validator = $("#myForm").validate();
validator.destroy();
Это уничтожит все ошибки проверки
$(FORM_ID).validate().resetForm(); все еще не работает, как ожидалось.
Я очищаю форму с resetForm(), Это работает во всех случаях, кроме одного!
Когда я загружаю любую форму через Ajax и применяю проверку формы после загрузки моей динамической HTML, то после того, как я пытаюсь сбросить форму с resetForm() и это терпит неудачу, и это также сбрасывало всю проверку, которую я применяю к элементам формы.
Поэтому, пожалуйста, не используйте это для загруженных Ajax форм ИЛИ инициализированной вручную проверки.
PS Вам нужно использовать ответ Ника Крейвера для такого сценария, как я объяснил.
Я только что сделал
$('.input-validation-error').removeClass('input-validation-error');
удалить красную рамку на полях ошибок ввода.
Если вы хотите сбросить numberOfInvalids() а затем добавить следующую строку в resetForm функция в jquery.validate.js номер строки файла: 415.
this.invalid = {};
Чтобы удалить резюме проверки, вы можете написать это
$('div#errorMessage').remove();
Однако, как только вы удалили, снова, если проверка не удалась, она не будет отображать эту сводку проверки, потому что вы удалили ее. Вместо этого используйте скрыть и отобразить с помощью кода ниже
$('div#errorMessage').css('display', 'none');
$('div#errorMessage').css('display', 'block');
Я взял то, что опубликовали другие, и копнул немного глубже, и пришел к следующему: В моей форме я добавил
class="EditProv"
ко всем моим элементам.
var validator = $("#FormEditProvider").validate();
validator.resetForm();
validator.reset();
$('#FormEditProvider .EditProv').removeClass('input-validation-error');
$("[id^=Provider_][id$=error]").html("");
Первая строка запускает валидатор, который вам понадобится для остальной части. Вторая и третья строки являются «официальным» способом. Четвертая строка находит все с классом "EditProv" и удаляет из классов "input-validation-error". Наконец, пятая строка очищает текст сообщения об ошибке. Для моей формы подключаемый модуль проверки jquery добавлял или изменял этот диапазон:
<span id="Provider_MedicareNum-error" class="">
Где «Provider_MedicareNum» — это идентификатор элемента, а jquery добавляет к нему -error.
Ничего из вышеперечисленного не сработало для начальной загрузки 4. Эта проблема решила для меня:
$('#formId .invalid-feedback').remove()
$('#formId input').removeClass('is-valid');
$('#formId input').removeClass('is-invalid');
Пишите собственный код, потому что все используют разные имена классов. Я сбрасываю проверку jQuery с помощью этого кода.
$('.error').remove();
$('.is-invalid').removeClass('is-invalid');
Для v1.19.0 для проверки JQuery я обнаружил, что у меня работает эта одна строка кода:
$('.field-validation-error').removeClass('field-validation-error').addClass('field-validation-valid').html('');
Фактически, поле кажется действительным для пользователя, но когда они снова нажимают кнопку "Отправить", проверка запускается повторно.
Ни одно из вышеперечисленных решений не помогло мне. Я был разочарован тем, что тратил на них свое время. Однако есть простое решение.
Решение было достигнуто путем сравнения разметки 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');
Удачного кодирования.
Попробуйте использовать это для удаления проверки по нажатию на кнопку отмены
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);
}
}
}
validator.resetForm() Метод очистки текста ошибки. Но если вы хотите удалить КРАСНУЮ границу из полей, вы должны удалить класс has-error
$('#[FORM_ID] .form-group').removeClass('has-error');
Попробуй использовать:
onClick="$('.error').remove();"
на кнопку Очистить.