JSFiddle - React, Tailwind, and code Playground

by Philippe Gioseffi

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<div id="msgErros"></div>
<form>
    <label for="dataInicial">Data Inicial</label>
    <input type="text" name="filtro.dataInicial" id="dataInicial" class="datas" />
    <label for="dataFinal">Data Final</label>
    <input type="text" name="filtro.dataFinal" id="dataFinal" class="datas" />
    <br />
    <label for="tempoInicial">Tempo Inicial</label>
    <input type="text" name="filtro.tempoInicial" id="tempoInicial" class="tempos" />
    <label for="tempoFinal">Tempo Final</label>
    <input type="text" name="filtro.tempoFinal" id="tempoFinal" class="tempos" />
    <br />
    <button type="submit">Enviar</button>
</form>

JavaScript

$("form").validate({
    rules: {
        "filtro.dataInicial": {
            skip_or_fill_minimum: [2, ".datas"]
        },
            "filtro.dataFinal": {
            skip_or_fill_minimum: [2, ".datas"]
        },
            "filtro.tempoInicial": {
            skip_or_fill_minimum: [2, ".tempos"]
        },
            "filtro.tempoFinal": {
            skip_or_fill_minimum: [2, ".tempos"]
        }
    },
    messages: {
        "filtro.dataInicial": {
            skip_or_fill_minimum: "Por favor, preencha ambos os campos de data ou nenhum deles."
        },
            "filtro.dataFinal": {
            skip_or_fill_minimum: "Por favor, preencha ambos os campos de data ou nenhum deles."
        },
            "filtro.tempoInicial": {
            skip_or_fill_minimum: "Por favor, preencha ambos os campos de tempo ou nenhum deles."
        },
            "filtro.tempoFinal": {
            skip_or_fill_minimum: "Por favor, preencha ambos os campos de tempo ou nenhum deles."
        }
    },
    groups: {
        grupoDatasAtendimentoSintetico: "filtro.dataInicial filtro.dataFinal",
        grupoTemposAtendimentoSintetico: "filtro.tempoInicial filtro.tempoFinal"
    },
    errorContainer: "#msgErros ul",
    errorLabelContainer: "#msgErros",
    wrapper: "li"
});