JSFiddle - React, Tailwind, and code Playground

by Philippe Gioseffi

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="https://rawgithub.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js"></script>
<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"...

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