Is it possible to use sub-groups?

Asked

Viewed 277 times

8

I have a form and this has three pairs of start/end dates. For each pair I validate if both dates are filled in or none of them is filled in, because it is not allowed to fill in the start date and not the end date and vice versa, moreover, I can not send the form without at least one of the completed pairs.

Imagine the user entering dates only at start dates , but none at end dates, I have to show you three error messages, one for each pair. But if the user enters no data, I should send only an error message.

The problem is that there are four groups, one for each pair and one for the whole form, in other words, the first three pairs are subgroups of the largest.

If I put the larger group in my code last, I only get an error message if the user sends a blank form but only get an error message if the user enters only the start or end dates as well. If I put the larger group first, I get three error messages when the user enters only the start dates, which is right, but I also get three error messages equal if the user sends an empty form.

HTML:

<div id="msgErros"></div>
<form>
    <label for="dataInicialSolicitacao">Solicita&ccedil;&atilde;o Inicial</label>
    <input type="text" class="data skipOrFillDatasSolicitacao atLeastOneRequired" id="dataInicialSolicitacao" value="" size="12" name="filtro.dataInicialSolicitacao" maxlength="10" />
    <label for="dataFinalSolicitacao">Solicita&ccedil;&atilde;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&ccedil;&atilde;o Inicial</label>
    <input type="text" class="data skipOrFillDatasLiberacao atLeastOneRequired" id="dataInicialLiberacao" value="" size="12" name="filtro.dataInicialLiberacao" maxlength="10" />
    <label for="dataFinalLiberacao">Libera&ccedil;&atilde;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&ccedil;&atilde;o Inicial</label>
    <input type="text" class="data skipOrFillDatasInternacao atLeastOneRequired" id="dataInicialInternacao" value="" size="12" name="filtro.dataInicialInternacao" maxlength="10" />
    <label for="dataFinalInternacao">Interna&ccedil;&atilde;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 one message when I need three. Then press "Clear" and then "Query" and you will get a message just 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 behavior correct occurs for both cases?

I use jQuery Validate 1.11.1 with jQuery 1.11.0.

javascript jquery jquery-validate
  • 1

    I saw your question in the meta and your post in English in the OS. Hint: try to simplify the code more before posting here. If you can create a minimal example to explain the problem, it’s easier for people to help because they don’t need to read and understand larger code. Bonus: in the process of trying to create this example, we often discover the solution on our own.

  • I get it, I’m going to take out a lot of stuff that has absolutely nothing to do with my problem like the reset of the form, the ignored rules, taking out the datepicker that does not influence the problem and then the onfocusout and so on. Thank you for the touch. In time, did you manage to look at the fiddles? Do you have any idea what the problem might be? And congratulations on correlating these two questions with the one I did on meta, quick and logical reasoning.

  • I received a Warning about it, but did not know how to fix it. Thanks for the guidance! In time, why should we do it this way?

  • I couldn’t get a good look at the code because it was too big :)

  • Don’t take the datepicker off, it might come in handy... And by the way, to use github links, take the first . (point). So use: https://rawgithub.com/digitalBush/ instead of raw.github http://jsfiddle.net/LevK6/2/

  • About the git, take a look here: https://rawgithub.com/

  • I understand about git and I’m already editing my code here and in the two fiddles.

  • @bfavaretto code in question and fiddle modified according to your instructions. You are better now?

  • It got better yes! I hope an answer appears, I unfortunately do not know the jq.validate well enough to help,

  • Anyway helped a lot in other aspects, @bfavaretto.

Show 5 more comments

1 answer

1

If I could understand your question, this would be your answer:

Jsfiddle

I pulled out the group:

datasSolicitacao: "filtro.dataInicialSolicitacao filtro.dataFinalSolicitacao",
datasLiberacao: "filtro.dataInicialLiberacao filtro.dataFinalLiberacao",
datasInternacao: "filtro.dataInicialInternacao filtro.dataFinalInternacao"

  • thanks for the help, but the withdrawal of the group did not solve my problem. the behavior included by you is correct when the user tries to send the form without filling anything, because only one message appears. But imagine the user entering only start dates, when pressing query I want to appear three error messages to him, stating that he needs to fill in the end dates of where he has already filled in the initial or delete the start date.

Browser other questions tagged javascript jquery jquery-validate

You are not signed in. Login or sign up in order to post.