Jquery validate clear error

Reset validation (clear error messages) #76

This is not really an issue, but I cannot seem to find an easy way to do this. I am using a form in a modal for record add/edits. If the content of the form gets populated dynamically by means of a record edit, the error messages from the previous validation still shows. I would like to clear all validation messages through jQuery. How do I do this?

The text was updated successfully, but these errors were encountered:

You can trigger the blur event on the form elements that you need re-validation after they are populated.
$( «#target» ).blur(); //

http://api.jquery.com/blur/
If the validation of the new elements is successful it will clear all errors, if something needs attention they’ll receive new error messages.

Thank you, but that is not exactly what I am looking for. My functionality allows you to also «reset» the form, which makes it a blank form again. I would like all validation messages to disappear until a field is filled in or «Submit» is clicked on, like the form was initially on page load. If I follow your instruction, all fields with length > 0 validation will still show error messages as these fields are empty.

Well, ‘length = 0’ but yes, I’m following your reasoning. So I’m guessing that you’re looking for:

And all elements with that class will be removed, I’m just not sure if it will fire the validation again. You’ll need to test it.

Thank you for your help thus far. $( «.form-error» ).remove(); removed the validation error messages. However, the text box borders are still red. Even if I do the following:

$(‘.error’).removeAttr(‘style’);
$(‘.error’).removeAttr(‘data-validation-current-error’);
$(‘.error’).removeClass(‘error’);

The textbox borders are still red. Although they do go from a bright red to a more maroon red. I have removed all additional attributes and classes from the input so that it looks just like it looked initially, but the border remains. This is acceptable for now, but it would be nice if the validation had some kind of reset function to do all of this for you when you reset the form.

I’m thinking on implementing this so that the error messages and styles will be removed when you call the native function reset on a form. Something like:

Thank you, I’m sure that would help a lot. 🙂

Источник

Cannot clear validation errors when jquery.form library is included — only reset entire form. #1540

We’ve got some custom integration between jquery-validation and an Ajax form. We also use jquery.form in some of our codebase.

We want to be able to reset ONLY the form errors, which traditionally we would do with a call to $validator.resetForm();

Unfortunately, when you have the jquery.form library included, jquery-validation’s resetForm method also calls $.fn.resetForm. This causes the form data itself to be reset.

Due to this, there’s no way to reset just the form errors without also resetting the form content with this library installed. I also can’t see a way to opt-out of this assumptive integration.

The obvious answer is «don’t use jquery.form» but unfortunately that’s not an option. I’d much prefer it if there was a method exclusively for resetting validation, or a toggle to opt in/out of the jquery.form integration.

The text was updated successfully, but these errors were encountered:

Just came across this issue and found that the problem is caused by these lines /src/core.js#L479-L481:

The jquery.form library defines already this function to reset the form data, see jquery.form.js#L1211-L1222:

So, the plugin will call this function first to wipe the form data, then reset the error messages.

Also, there is already a unit test which assert that the form was cleared when jquery form plugin is included, see https://github.com/jzaefferer/jquery-validation/blob/master/test/test.js#L840.

👉 So this is the intended behavior, not a bug.

But even after knowing this behavior is intended, there is a question that needs an answer:

«why the three lines above (the first link) are added in the first place?».

I tracked down the commits in order to answer it, and found that these lines are already there when jzafferer pushed the whole project for the first time back in Aug 1, 2009

So only @jzaefferer can answer this question.

I forgot to mention that you can work around this issue by overriding the resetForm function of jquery form plugin , what I did is:

@Arkni thanks for the explanation. I too came to the conclusion about those lines of code during my original debugging. I also agree this appears to be the intended behaviour when integrated with jquery.form.

We use jquery.form in a variety of places, so just wholesale noop’ing jquery.form’s resetForm function isn’t really an option. It’s also equivalently hacky as my original money-patch, so I don’t see much of a gain.

My issue, is I’d rather that jquery-validation didn’t assume I want this integrated functionality when the two libraries are on the same page, or at least let me disable the integration (which would be backwards compat).

In case I’ve missed something and there’s a better way to do this, here’s why I’m down this path:
I’m trying to use jquery-validation to accept a validation response from the server (JSON), which maps errors messages to fields. When I re-submit the form, I want to use jquery-validation to clear any remaining validation errors.
This is all working, bar the fact that I can’t clear the validation errors using jquery-validation without jquery.form also being called to reset the form data.

Again, thanks for taking the time to look at this.

We use jquery.form in a variety of places, so just wholesale noop’ing jquery.form’s resetForm function isn’t really an option. It’s also equivalently hacky as my original money-patch, so I don’t see much of a gain.

I see what you mean, I also thought about that and looking for another workaround.

In case I’ve missed something and there’s a better way to do this, here’s why I’m down this path:
I’m trying to use jquery-validation to accept a validation response from the server (JSON), which maps errors messages to fields. When I re-submit the form, I want to use jquery-validation to clear any remaining validation errors.
This is all working, bar the fact that I can’t clear the validation errors using jquery-validation without jquery.form also being called to reset the form data.

I hope this integration was removed from the first time. Until this happens, I’m using an other ugly solution (Sorry I forgot to came back to mention it here):

I guess a proper integration fix / workaround for you could also be

so you only need to do it once at init time and you can use the API of jquery-validate as suggested in the samples etc.

We cannot change the code in core, because it is a BC break and some other users and libs might already rely on it. Therefore I would declare it as intended behaviour.

Feel free to discuss it further, will close the issue for now, as I see nothing we could do about it.

Источник

Как очистить сообщения об ошибках проверки jQuery?

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

Но я хочу очистить сообщения об ошибках в моей форме, когда я нажимаю кнопку «Очистить», которая вызывает отдельную функцию. clearUser() .

29 ответы

Вы хотите, чтобы resetForm() Метод:

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

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

Создан 22 июля ’17, 09:07

Для тех, кто использует бутстрап, есть случаи, когда resetForm() не очищает все экземпляры .error на дочерних элементах формы. Это оставит остаточный CSS, такой как красный цвет текста, если вы не вызовете .removeClass() . Пример: $(‘#myform .control-group’).removeClass(‘error’); — Jlewkovich

При использовании bootstrap 3 это не скрывает ошибок проверки полей. Какая жалость. — Маффин Человек

У меня работает с Bootstrap 3. Возможно, проблема в вашей интеграции обеих библиотек? — Берни

Нет, этот resetForm буквально даже оставит данные формы. — Кодомоль

то, что @JLewkovich говорит, что использование bootstrap3 верно, необходимо реализовать ручной сброс, переход в инспектор и выяснение, какие классы применяются при ошибках — Нестор Кольт

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

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

I was looking around for a way to reset form Unobtrusive jQuery validation. In other words, I want to reset everything to default. Unobtrusive validation closely relates to data annotations because they hold the validation rules. For example, you can set up min or max length a text box field. More importantly, how to clear unobtrusive jQuery validation, we learn that it doesn’t have any way to reset the UI after errors occur. However, you can safely use:

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

The best example I found online was on John Culviner blog. It wasn’t exactly what I was looking for, but it was a good start. He resets the form by using a button and attributes, I need a function that does that, so I create a plugin that clears the fields on demand.

Clear Reset Form Unobtrusive jQuery validation

The clear reset form unobtrusive jQuery validation plugin itself is quite simple. It’s wrapped inside an IIFE function or Immediately Invoked Function Expression. To use it, start with writing it in the following shorthand way.

(function () { 
// logic here 
})();

Inside the IIFE, I created a function called “clearForm” that takes options. Looking closely at the $.extend method, I tell it to find a form on the page and use that as it’s Id. Please let me know if I’m doing double work here because I’m also setting the form ID from options (you will see in the complete example).

$.fn.clearForm = function(options) {
    formId: this.closest('form')
}

Moving to the part of reset form unobtrusive jQuery validation, I make the following calls. The first call puts the structure into a clean state.

$form.validate().resetForm();

Afterword, if you’re using MVC, you will want to reset the validation summary. The following is an optional step.

 $form.find("[data-valmsg-summary=true]")
    .removeClass("validation-summary-errors")
    .addClass("validation-summary-valid")
    .find("ul").empty();

Finally, if you’re using MVC, you will want to reset all the error fields and finish by returning the form.

//reset unobtrusive field level, if it exists 
$form.find("[data-valmsg-replace]")
    .removeClass("field-validation-error")
    .addClass("field-validation-valid")
    .empty();

return $form;

Final Thoughts

For your convenience, I’ve put together the JavaScript. To use it, you will need to call $(“#signupform”).clearForm(); I hope this script makes your life a tad bit easier while working to Reset Form Unobtrusive jQuery validation.

(function($) {

    $.fn.clearForm = function(options) {

        // This is the easiest way to have default options.
        var settings = $.extend({
            // These are the defaults.

            formId: this.closest('form')

        }, options);

        var $form = $(settings.formId);

        //reset jQuery Validate's internals
        $form.validate().resetForm();

        //reset unobtrusive validation summary, if it exists
        $form.find("[data-valmsg-summary=true]")
            .removeClass("validation-summary-errors")
            .addClass("validation-summary-valid")
            .find("ul").empty();

        //reset unobtrusive field level, if it exists
        $form.find("[data-valmsg-replace]")
            .removeClass("field-validation-error")
            .addClass("field-validation-valid")
            .empty();

        return $form;
    };

}(jQuery));

If you want to share your judgment on how to Reset Form Unobtrusive jQuery validation:

• Leave a comment over the “What’s Crackin’ (•◡•) /” section below.
• Share this show on Twitter, Google+ or Pinterest