Question

当模糊事件发生时，有没有停止jQuery验证来验证表单？

我有三对开始/结束日期，这六个字段中的每一个都使用DatePicker加上每对日期验证该对的其他字段是否已填写，因为如果结束日期已填写，则无法提交表单但开始日期不是，反之亦然。

当用户从DatePicker中选择日期时，问题就出现了，浏览器触发模糊事件，jQuery validate尝试验证表单，并意识到该对的其他字段为空，然后显示错误消息。此外，当用户填充对的第二个字段时，再次填充字段之前触发blur事件，验证插件显示错误消息。

HTML：

<form>
    <table width="95%" id="tabela_interna">
        <thead><tr valign="middle"><th colspan="6">Report</th></tr></thead>
            <tbody>
                <tr valign="middle">
                    <td width="14%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data de Solicita&ccedil;&atilde;o Inicial</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data atLeastOneRequired"/>
                    </td>
                    <td width="12%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data de Solicita&ccedil;&atilde;o Final</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data atLeastOneRequired"/>
                    </td>
                </tr>
                <tr valign="middle">
                    <td width="14%" align="left" class="td_label"><label for="dataInicialLiberacao">Data de Libera&ccedil;&atilde;o Inicial</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data atLeastOneRequired"/>
                    </td>
                    <td width="12%" align="left" class="td_label"><label for="dataFinalLiberacao">Data de Libera&ccedil;&atilde;o Final</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data atLeastOneRequired"/>
                    </td>
                </tr>
                <tr valign="middle">
                    <td width="14%" align="left" class="td_label"><label for="dataInicialInternacao">Data de Interna&ccedil;&atilde;o Inicial</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data atLeastOneRequired"/>
                    </td>
                    <td width="12%" align="left" class="td_label"><label for="dataFinalInternacao">Data de Interna&ccedil;&atilde;o Final</label></td>
                    <td width="25%" align="left" class="td_dados">
                        <input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data atLeastOneRequired"/>
                    </td>
                </tr>
        </tbody>
    </table>
</form>

我们编写的jQuery插件：

$.fn.aplicaLayoutPersonalizavel = function() {
    personalizaAplicacao();
    return this;
};

function personalizaAplicacao() {
    $(".data").apagaDataInvalida().mask("99/99/9999").numeric().datepicker().attr("maxlength", 10);
}

$.validator.setDefaults({
    errorContainer : "#msgErros ul",
    errorLabelContainer: "#msgErros",
    wrapper: "li",
    submitHandler: function(form) {
        var erros = $("div#msgErros");
        if (typeof $("#acao").val() === "undefined") {
            if (erros.length > 1) {
                erros.empty();
            }
            stopAnimating();
            erros.html("<ul><li>O parâmetro ação deve ser definido.</li></ul>");
            erros.show();
            return false;
        }

        $.blockUI();
        var dadosRelatorio = $(form).formSerialize();
        switch (parseInt($("#acao").val())) {
            case 1:
                if (typeof urlRelatorio !== 'undefined' && urlRelatorio != null) {
                    $("#respostaRelatorio").jqGrid("GridUnload");
                    $("#respostaRelatorio").jqGrid({
                        url: urlRelatorio + "?" + dadosRelatorio,
                        colModel: modeloColunas,
                        autowidth: typeof larguraAutomatizada !== "undefined" && larguraAutomatizada != null ? larguraAutomatizada : false
                    });
                } else {
                    form.submit();
                }
                break;
            case 2:
                downloadArquivo(urlExportarExcel, dadosRelatorio);
                break;
            case 3:
                downloadArquivo(urlExportarPdf, dadosRelatorio);
                break;
        }
    },
    invalidHandler: function() { stopAnimating(); }
});

$.fn.inicializaValidacaoFormulario = function() {
    $("form").validate({
        rules: typeof regras !== "undefined" && regras != null ? regras : {},
        messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
        agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {}
    });
    return this;
};

验证：

regras = {
    "filtro.codigoProcedimento": { range: [1, 9223372036854775807] },
    "filtro.codigoHospital": { range: [1, 9223372036854775807] },
    "filtro.codigoSegurado": { range: [1, 9223372036854775807] },
    "filtro.numeroSolicitacao": { range: [1, 2147483647] },
    "filtro.dataInicialSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalSolicitacao", maximunDifferenceBetweenDates: ["#dataFinalSolicitacao", 90] },
    "filtro.dataFinalSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialSolicitacao", maximunDifferenceBetweenDates: ["#dataInicialSolicitacao", 90] },
    "filtro.dataInicialInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalInternacao", maximunDifferenceBetweenDates: ["#dataFinalInternacao", 90] },
    "filtro.dataFinalInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialInternacao", maximunDifferenceBetweenDates: ["#dataInicialInternacao", 90] },
    "filtro.dataInicialLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalLiberacao", maximunDifferenceBetweenDates: ["#dataFinalLiberacao", 90] },
    "filtro.dataFinalLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialLiberacao", maximunDifferenceBetweenDates: ["#dataInicialLiberacao", 90] }
};

mensagens = {
    "filtro.codigoProcedimento": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o cartão." },
    "filtro.codigoHospital": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o estipulante." },
    "filtro.codigoSegurado": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher a solicitação." },
    "filtro.numeroSolicitacao": { range: "Por favor, insira um valor entre 1 e 2147483647 ao preencher o referenciado." }
};

agrupamentos = {
    datasSolicitacao: "#dataInicialSolicitacao #dataFinalSolicitacao",
    datasLiberacao: "#dataInicialLiberacao #dataFinalLiberacao",
    datasInternacao: "#dataInicialInternacao #dataFinalInternacao"
};

$.extend($.validator.messages, {
    require_from_group: $.format("Por favor, preencha ao menos {0} uma das duplas de datas para realizar a consulta.")
});

我不希望插件在发生模糊事件时停止验证其他表单，只是这个。有什么建议吗？

Answer 1

解决方案是覆盖jQuery Validate插件的onfocusout属性。所以我按上述方式做了：

jQuery插件中的更改：

$.fn.inicializaValidacaoFormulario = function() {
    $("form").validate({
        rules: typeof regras !== "undefined" && regras != null ? regras : {},
        messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
        agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {},
        onfocusout: typeof preventBlurEvents !== "undefined" && preventBlurEvents != null ? preventBlurEvents : {}
    });
    return this;
};

我将此添加到验证中：

preventBlurEvents = function (element, event) {
    if (!$(element).attr("class").contains("data")) {
        $.validator.defaults.onfocusout.call(this, element, event);
    }
};

jQuery Validate - 如何防止插件验证特定功能的onblur事件？

1 个答案: