JSFiddle - React, Tailwind, and code Playground

by Luiz Silva

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 method="post">
    <label for="tempoInicial">Tempo Inicial</label>
    <input type="text" name="filtro.tempoInicial" size="8" value="" id="tempoInicial" class="tempo" />
    <br />
    <label for="operadorTempo">Operador de Tempo</label>
    <select name="filtro.valorOperadorTempo" id="operadorTempo" class="tempo">
        <option value="">-- Selecione --</option>
        <option value="1">&gt; - Maior</option>
        <option value="2">&lt; - Menor</option>
        <option value="3">Entre</option>
    </select>
    <br />
    <label for="tempoFinal">Tempo Final</label>
    <input type="text" name="filtro.tempoFinal" size="8" value="" id="tempoFinal" />
    <br />
    <button>Enviar</button>
</form>

JavaScript

$("form").validate({
    errorContainer: "#msgErros ul",
    errorLabelContainer: "#msgErros",
    wrapper: "li",
    rules: {
        "filtro.tempoInicial": {
            required: function(element) {
                return $("#operadorTempo").val() == 3
                       || $('#tempoFinal').val() == '';
          }
        },
        "filtro.valorOperadorTempo": {
            required: true
        },
        "filtro.tempoFinal": {
            required: function(element) {
                return $("#operadorTempo").val() == 3 
                       || $('#tempoInicial').val() == '';
            }
        }
    },
    groups: {
        tempos: "filtro.tempoInicial filtro.valorOperadorTempo"
    },
    onfocusout: function (element, event) {
        var classeCSSElemento = $(element).attr("class");
        var classeCSSElementoIndefinida = typeof classeCSSElemento === "undefined";
        if (classeCSSElementoIndefinida || (!classeCSSElementoIndefinida && !classeCSSElemento.contains("tempo"))) {
            $.validator.defaults.onfocusout.call(this, element, event);
        }
    }
});