jQuery validate - require_from_group дублирующее сообщение об ошибке

Question

У меня есть форма и три пары дат начала и окончания. Для каждой пары я проверяю, заполнены ли оба входа или ни один из них не заполнен, потому что не разрешено заполнять дату начала и не указывать дату окончания и наоборот, плюс я не могу отправить форму без по крайней мере, одна из пар заполнена.

Подтверждение для каждой пары работает нормально, но правило, которое должно проверяться, если заполнено хотя бы одна из трех пар, дублирует сообщение об ошибке в первом и последнем полях формы.

Я написал fiddle, чтобы проиллюстрировать проблему. Я хочу, чтобы одно сообщение отображалось только, а не два, как это происходит. Что я делаю неправильно?

Другие сомнения, могу ли я использовать require_from_group для проверки пары вместо проверки каждого из шести входов?

EDIT StackOverFlow, если вы вынуждаете меня добавить код, так как я предоставил скрипку. Вы можете проигнорировать это, потому что это уже в скрипке.

HTML-:

<div id="msgErros" class="mensagens_erro"></div> 
<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> 
    <br /> 
    <div style="width: 95%; text-align: center"> 
     <button class="margem_botoes" id="gerarRelatorio">Consultar</button> 
     <button class="margem_botoes" type="reset">Limpar</button> 
    </div> 
</form> 

JS:

String.prototype.contains = function(sub) { return this.indexOf(sub) != -1; }; 

$("form").validate({ 
    rules: { 
     "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] } 
    }, 
    messages: { 
     "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." } 
    }, 
    groups: { 
     datasSolicitacao: "#dataInicialSolicitacao #dataFinalSolicitacao", 
     datasLiberacao: "#dataInicialLiberacao #dataFinalLiberacao", 
     datasInternacao: "#dataInicialInternacao #dataFinalInternacao" 
    }, 
    onfocusout: function (element, event) { 
     if (!$(element).attr("class").contains("data")) { 
      $.validator.defaults.onfocusout.call(this, element, event); 
     } 
    } 
}); 

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

$.validator.setDefaults({ 
    errorContainer : "#msgErros ul", 
    errorLabelContainer: "#msgErros", 
    wrapper: "li" 
}); 

$.validator.addMethod("trim", function(value, element) { 
    return value.length > 0 ? $.trim(value).length > 0 : true; 
}, "Por favor, entre com valores diferentes de apenas espaços para o campo."); 

$.validator.addMethod("ifDateIsFilledOtherOneIsMandatory", function(value, element, param) { 
    var target = $(param); 
    if (this.settings.onfocusout) { 
     target.unbind(".validate-ifDateIsFilledOtherOneIsMandatory").bind("blur.validate-ifDateIsFilledOtherOneIsMandatory", function() { $(element).valid(); }); 
    } 

    return !(!isDateEmptyOrFilledWithMask(target.val()) && isDateEmptyOrFilledWithMask(value)); 
},"Por favor, forneça a outra data deste par final e inicial de datas."); 

$.validator.addMethod("maximunDifferenceBetweenDates", function(value, element, param) { 
    var startDate; 
    var endDate; 
    if (param[0].contains("Final")) { 
     startDate = value; 
     endDate = $(param[0]).val(); 
    } else { 
     startDate = $(param[0]).val(); 
     endDate = value; 
    } 

    return areBothDatesFilled(startDate, endDate) ? (($.datepicker.parseDate("dd/mm/yy", endDate) - $.datepicker.parseDate("dd/mm/yy", startDate))/86400000) <= param[1] : true; 
}, $.validator.format("Por favor, forneça uma diferen&ccedil;a de no m&aacute;ximo {1} dias entre as datas.")); 

function areBothDatesFilled(firstDate, secondDate) { 
    return !isDateEmptyOrFilledWithMask(firstDate) && !isDateEmptyOrFilledWithMask(secondDate); 
} 

function isDateEmptyOrFilledWithMask(date) { 
    return date == "" || date == "__/__/____"; 
} 

$(".data").mask("99/99/9999").numeric().datepicker().attr("maxlength", 10); 

$("form").on("reset", function(event) { 
    event.preventDefault(); 
    $(this).clearForm(); 
    $("#respostaRelatorio").jqGrid("GridUnload"); 
    $(".erasableInfo").empty(); 
    $("#msgErros").empty(); 
}); 

Answer 1

groups вариант обычно используется в сочетании с методом require_from_group. Он объединит все сообщения об ошибках в один для указанных полей. Затем вы можете использовать CSS и/или опцию errorPlacement, чтобы разместить сообщение по своему вкусу.

groups: { 
    someArbitraryName: "fieldName1 fieldName2 fieldName3" 
} 

См документация: http://jqueryvalidation.org/validate