Eu tenho um formulário e este tem três pares de datas de início/fim. Para cada par eu valido se ambas as datas são preenchidas ou nenhuma delas é preenchida, porque não é permitido a preencher a data de início e não a data de fim e vice-versa, além disso, eu não posso enviar o formulário sem pelo menos um dos pares preenchidos.
Imaginem o usuário inserir datas apenas em datas de início , mas nenhuma em datas de fim, eu tenho que mostrar-lhe três mensagens de erro, um para cada par. Mas se o usuário inserir nenhum dado, eu deveria mandar apenas uma mensagem de erro.
O problema é que existem quatro grupos, um para cada par e um para o formulário inteiro, em outras palavras, os três primeiros pares são subgrupos do maior.
Se eu colocar o grupo maior no meu código em último lugar, eu só recebo uma mensagem de erro se o usuário enviar um formulário em branco, mas só recebo uma mensagem de erro se o usuário entrar apenas as datas de início ou fim também. Se eu colocar o grupo maior em primeiro lugar, eu recebo três mensagens de erro quando o usuário entra apenas as datas de início, o que é certo, mas também recebo três mensagens de erro iguais se o usuário enviar um formulário vazio.
HTML:
<div id="msgErros"></div>
<form>
<label for="dataInicialSolicitacao">Solicitação Inicial</label>
<input type="text" class="data skipOrFillDatasSolicitacao atLeastOneRequired" id="dataInicialSolicitacao" value="" size="12" name="filtro.dataInicialSolicitacao" maxlength="10" />
<label for="dataFinalSolicitacao">Solicitação Final</label>
<input type="text" class="data skipOrFillDatasSolicitacao atLeastOneRequired" id="dataFinalSolicitacao" value="" size="12" name="filtro.dataFinalSolicitacao" maxlength="10" />
<br />
<label for="dataInicialLiberacao">Liberação Inicial</label>
<input type="text" class="data skipOrFillDatasLiberacao atLeastOneRequired" id="dataInicialLiberacao" value="" size="12" name="filtro.dataInicialLiberacao" maxlength="10" />
<label for="dataFinalLiberacao">Liberação Final</label>
<input type="text" class="data skipOrFillDatasLiberacao atLeastOneRequired" id="dataFinalLiberacao" value="" size="12" name="filtro.dataFinalLiberacao" maxlength="10" />
<br />
<label for="dataInicialInternacao">Internação Inicial</label>
<input type="text" class="data skipOrFillDatasInternacao atLeastOneRequired" id="dataInicialInternacao" value="" size="12" name="filtro.dataInicialInternacao" maxlength="10" />
<label for="dataFinalInternacao">Internação Final</label>
<input type="text" class="data skipOrFillDatasInternacao atLeastOneRequired" id="dataFinalInternacao" value="" size="12" name="filtro.dataFinalInternacao" maxlength="10" />
<br />
<button>Consultar</button>
<button type="reset">Limpar</button>
</form>
JavaScript:
$(".data").mask("99/99/9999").datepicker();
$("form").validate({
rules: {
"filtro.dataInicialSolicitacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasSolicitacao"],
require_from_group: [2, ".atLeastOneRequired"]
},
"filtro.dataFinalSolicitacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasSolicitacao"],
require_from_group: [2, ".atLeastOneRequired"]
},
"filtro.dataInicialInternacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasInternacao"],
require_from_group: [2, ".atLeastOneRequired"]
},
"filtro.dataFinalInternacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasInternacao"],
require_from_group: [2, ".atLeastOneRequired"]
},
"filtro.dataInicialLiberacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasLiberacao"],
require_from_group: [2, ".atLeastOneRequired"]
},
"filtro.dataFinalLiberacao": {
skip_or_fill_minimum: [2, ".skipOrFillDatasLiberacao"],
require_from_group: [2, ".atLeastOneRequired"]
}
},
groups: {
datasSolicitacao: "filtro.dataInicialSolicitacao filtro.dataFinalSolicitacao",
datasLiberacao: "filtro.dataInicialLiberacao filtro.dataFinalLiberacao",
datasInternacao: "filtro.dataInicialInternacao filtro.dataFinalInternacao",
todos: "filtro.dataInicialSolicitacao filtro.dataFinalSolicitacao filtro.dataInicialLiberacao filtro.dataFinalLiberacao filtro.dataInicialInternacao filtro.dataFinalInternacao"
},
errorContainer: "#msgErros ul",
errorLabelContainer: "#msgErros",
wrapper: "li"
});
Criei um fiddle com o grupo maior no final. Para testá-lo basta digitar datas de início e pressionar "Consultar", você só vai ter uma mensagem quando eu preciso de três. Em seguida, pressione "Limpar" e depois "Consultar" e você terá uma mensagem apenas o que é correto.
E aqui está uma variação do primeiro fiddle com o grupo maior no começo. Para testá-lo basta digitar datas de início e pressione "Consultar", você vai ter três mensagens, uma para cada linha e isso é correto. Em seguida, pressione "Limpar" e depois "Consultar" e você receberá três mensagens e isso não é correto.
Alguma idéia para tornar o comportamento correto ocorre para ambos os casos?
Eu uso jQuery Validate 1.11.1 com jQuery 1.11.0.
.
(ponto). Assim use:https://rawgithub.com/digitalBush/
em vez deraw.github
jsfiddle.net/LevK6/2