I have a form and it has three pairs of start / end dates. For each pair I validate if both dates are filled or none of them are filled, because it is not allowed to fill in the start date and not the end date and vice versa, in addition, I can not send the form without at least one of the pairs filled in.
Imagine the user entering dates only on start dates, but none on end dates, I have to show you three error messages, one for each pair. But if the user enters any data, I should just send an error message.
The problem is that there are four groups, one for each pair and one for the entire form, in other words, the first three pairs are subgroups of the largest.
If I put the largest group in my code last, I only get an error message if the user submits a blank form, but I only get an error message if the user only enters the start or end dates also. If I put the largest group first, I get three error messages when the user enters only the start dates, which is for sure, but I also get three equal error messages if the user submits an empty form. >
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"
});
I created a fiddle with the larger group at the end. To test it just enter start dates and press "Query", you will only get a message when I need three. Then press "Clear" and then "Query" and you will get a message only what is correct.
And here's a variation of the first fiddle with the larger group at the beginning. To test it just enter start dates and press "Query", you will get three messages, one for each line and this is correct. Then press "Clear" and then "Query" and you will receive three messages and this is not correct.
Any idea to make the correct behavior occur for both cases?
I use jQuery Validate 1.11.1 with jQuery 1.11.0.