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://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/localization/messages_pt_br.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://thefitties.co.uk/js/plugins/jquery-numeric.js"></script>
<script src="https://raw.github.com/digitalBush/jquery.maskedinput/1.3.1/dist/jquery.maskedinput.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://malsup.github.io/min/jquery.form.min.js"></script>
<div id="msgErros" class="mensagens_erro"></div>
<form>
    <table width="95%" id="tabela_interna">
        <thead>
            <tr valign="middle">
                <th colspan="6">Report</th>
            </tr>
        </thead>
        <tbody>
            <tr valign="middle">
                <td width="14%" align="left" class="td_label">
                    <label for="dataInicialSolicitacao">Data de Solicita&ccedil;&atilde;o Inicial</label>
                </td>
                <td width="25%" align="left" class="td_dados">
                    <input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data atLeastOneRequired skipOrFillDatasSolicitacao" />
                </td>
                <td width="12%" align="left" class="td_label">
                    <label for="dataFinalSolicitacao">Data de Solicita&ccedil;&atilde;o Final</label>
                </td>
                <td width="25%" align="left" class="td_dados">
                    <input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data atLeastOneRequired skipOrFillDatasSolicitacao" />
                </td>
            </tr>
            <tr valign="middle">
        ...

CSS

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    color: #333333;
    margin: 0px;
    padding: 0px;
}
#tabela_interna {
    border: 1px solid #666666;
}
.tabela_interna {
    border: 1px solid #666666;
}
#tabela_interna th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    padding: 3px;
    text-align: center;
}
.tabela_interna th {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    font-weight: bold;
    color: #000000;
    background-color: #CCCCCC;
    padding: 3px;
    text-align: center;
}
#tabela_interna tr {
    padding: 3px;
    background-color: #EFEFEF;
}
.tabela_interna tr {
    padding: 3px;
    background-color: #EFEFEF;
}
.tabela_interna td {
    padding-left: 2px;
    padding-right: 2px;
}
#tabela_interna td {
    padding-left: 2px;
    padding-right: 2px;
}
#tabela_interna tr.off {
    padding: 3px;
    background-color: #DCDEDD;
}
.tabela_interna tr.off {
    padding: 3px;
    background-color: #DCDEDD;
}
#tabela_interna TR.grupo1 {
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-top: 3px;
    background-color: #EEEEEE;
}
#tabela_interna TR.grupo2 {
    padding-right: 3px;
    padding-left: 3px;
    padding-bottom: 3px;
    padding-top: 3px;
    background-color: #DCDEDD;
}
.td_label {
    background-color: #E4E4E4;
    font-size: 9px;
    color: #333333;
    margin: 0px;
    padding: 0px;
}
.td_dados {
    font-weight: bold;
    font-size: 9px;
    color: #333333;
    margin: 0px;
    padding: 0px;
}
#tabela_interna tr.link {
    padding: 3px;
    background-color: #FFFFFF;
    color: #CC0000
}
.tabela_interna tr.link {
    padding: 3px;
    background-color: #FFFFFF;
    color: #CC0000
}
.margem_botoes {
    margin: 5px;
}
button, .button {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: bold;
 ...

JavaScript

String.prototype.contains = function (sub) {
    return this.indexOf(sub) != -1;
};

$.validator.addMethod("maximunDifferenceBetweenDates", function (value, element, param) {
    var startDate;
    var endDate;
    if (param[0].contains("Final")) {
        startDate = value;
        endDate = $(param[0]).val();
    } else {
        startDate = $(param[0]).val();
        endDate = value;
    }

    return areBothDatesFilled(startDate, endDate) ? (($.datepicker.parseDate("dd/mm/yy", endDate) - $.datepicker.parseDate("dd/mm/yy", startDate)) / 86400000) <= param[1] : true;
}, $.validator.format("Por favor, forneça uma diferen&ccedil;a de no m&aacute;ximo {1} dias entre as datas."));

function areBothDatesFilled(firstDate, secondDate) {
    return !isDateEmptyOrFilledWithMask(firstDate) && !isDateEmptyOrFilledWithMask(secondDate);
}

function isDateEmptyOrFilledWithMask(date) {
    return date == "" || date == "__/__/____";
}

$.validator.setDefaults({
    errorContainer: "#msgErros ul",
    errorLabelContainer: "#msgErros",
    wrapper: "li"
});

$("form").validate({
    rules: {
        "filtro.codigoProcedimento": {
            range: [1, 9223372036854775807]
        },
            "filtro.codigoHospital": {
            range: [1, 9223372036854775807]
        },
            "filtro.codigoSegurado": {
            range: [1, 9223372036854775807]
        },
            "filtro.numeroSolicitacao": {
            range: [1, 2147483647]
        },
            "filtro.dataInicialSolicitacao": {
            skip_or_fill_minimum: [2, ".skipOrFillDatasSolicitacao"],
            require_from_group: [2, ".atLeastOneRequired"],
            maximunDifferenceBetweenDates: ["#dataFinalSolicitacao", 90]
        },
            "filtro.dataFinalSolicitacao": {
            skip_or_fill_minimum: [2, ".skipOrFillDatasSolicitacao"],
            require_from_group: [2, ".atLeastOneRequired"],
            maximunDifferenceBetweenDates: ["#dataInicialSolicitacao", 90]
        },
           ...