如何重置 qTip2 验证？答案

【问题标题】：How to reset qTip2 validation?如何重置 qTip2 验证？
【发布时间】：2012-09-07 23:59:31
【问题描述】：

我在一个 ASP.Net MVC 项目中有一个表单，我在该项目上使用 qTip2 来显示验证错误。在该表单上，我还有根据单选按钮所做的选择激活/停用的文本字段。当不使用字段时，我设置了它们的 disabled="disabled" 属性。这确保了这些字段的客户端验证（jQuery 非侵入式验证）也被停用。现在，我想知道如何为被禁用的字段重置 qTip2“气泡”。

假设我有单选按钮 1 和 2，分别启用文本框 A 和 B。我们还说默认选择单选按钮1，并且选择相应的单选按钮时，该文本框A和B是必需的字段。如果我按下提交按钮而不填写任何文本字段，文本框 A 旁边会出现一个 qTip 错误气泡。现在，如果我按下单选按钮 2，我必须清除该气泡，禁用文本框 A 及其验证，并启用文本框 B 及其验证。但是，如果此时我在没有填写文本框 B 的情况下按提交，则不会出现错误气泡并且表单没有被提交。

我尝试了以下命令的各种组合来完成此操作，但验证错误被完全禁用：

$('.qtip').remove();
$('.qtip').hide();
$("input.input-validation-error").removeClass("input-validation-error"); // watch out for the error message labels or they won't go away
$('form').data('validator').resetForm();
$("form").validate().form();

无论我在单击单选按钮并禁用/启用正确的文本框后执行这些命令的何种组合，qTip 气泡都会消失，但即使我单击提交按钮，它们也不会再次出现，并且应该出现其他错误在表格上。

我可能没有使用正确的命令来重置 qTip 验证气泡。

【问题讨论】：

标签： validation jquery-validate qtip2

【解决方案1】：

好的，我在发布问题后立即找到了解决方案。我使用了这个页面上提出的解决方案http://johnculviner.com/?tag=/unobtrusive-validation-reset，我做了一些修改。我添加了以下行：$form.find('input').qtip('destroy');

它给出了这个：

//Taken from: http://johnculviner.com/?tag=/unobtrusive-validation-reset
(function ($) {
    $.fn.resetValidation = function () {
        var $form = this.closest('form');

        //Destroy qTip error bubbles (http://craigsworks.com/projects/forums/thread-using-qtip-with-jquery-validation-framework)
        //$form.find('input:not(.errormessage)').qtip('destroy');
        $form.find('input').qtip('destroy');

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

    //reset a form given a jQuery selected form or a child
    //by default validation is also reset
    $.fn.formReset = function (resetValidation) {
        var $form = this.closest('form');

        $form[0].reset();

        if (resetValidation == undefined || resetValidation) {
            $form.resetValidation();
        }

        return $form;
    }
})(jQuery);

然后，当单击单选按钮时，我调用 $("form").resetValidation();在正确的字段被启用/禁用之后。

【讨论】：