8

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&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"
});

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.

10
  • 1
    Eu vi sua pergunta no meta e seu post em inglês no SO. Sugestão: tente simplificar mais o código antes de postar aqui. Se você conseguir criar um exemplo mínimo para explicar o problema, fica mais fácil das pessoas ajudarem, pois não precisam ler e entender um código maior. Bônus: no processo de tentar criar esse exemplo, muitas vezes acabamos descobrindo a solução sozinhos.
    – bfavaretto
    30/01/2014 às 22:23
  • Entendi, vou tirar muita coisa que não tem absolutamente nada com o meu problema tipo o reset do form, as regras ignoradas, tirar o datepicker que não influencia no problema e aí consequentemente o onfocusout e etc. Obrigado pelo toque. Em tempo, você conseguiu olhar os fiddles? Tem idéia de qual possa ser o problema? E parabéns por correlacionar essas duas perguntas com a que eu fiz no meta, raciocínio rápido e lógico. 30/01/2014 às 22:39
  • Recebi um warning sobre isso, mas não soube como corrigir. Valeu pela orientação! Em tempo, por que devemos fazer desse jeito? 30/01/2014 às 22:41
  • Não consegui olhar direito o código porque era muito grande :)
    – bfavaretto
    30/01/2014 às 22:41
  • Não tire o datepicker, pode dar jeito... E já agora, para usar links do github, retire o primeiro . (ponto). Assim use: https://rawgithub.com/digitalBush/ em vez de raw.github jsfiddle.net/LevK6/2
    – Sergio
    30/01/2014 às 22:42

1 Resposta 1

1

Se eu consegui entender a sua pergunta, essa aqui seria a sua resposta:

JSFiddle

Eu retirei o grupo:

datasSolicitacao: "filtro.dataInicialSolicitacao filtro.dataFinalSolicitacao",
datasLiberacao: "filtro.dataInicialLiberacao filtro.dataFinalLiberacao",
datasInternacao: "filtro.dataInicialInternacao filtro.dataFinalInternacao"
1
  • obrigado pela ajuda, mas a retirada do grupo não resolveu meu problema. o comportamente incluso por você está correto quando o usuário tenta enviar o formulário sem preencher nada, pois aparece apenas uma mensagem. Mas imagine o usuário inserindo apenas datas de início, ao pressionar consultar eu quero que apareça três mensagens de erro pra ele, informando que ele precisa preencher as datas finais de onde ele já preencheu a inicial ou apagar a data inicial. 31/01/2014 às 15:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .