JSFiddle - React, Tailwind, and code Playground

by goranobradovic

HTML

<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form id="reportParametersForm" method="GET" action="">
    <fieldset>
        <legend>Business Summary</legend>
        
<div class="grid-2-12">
    <label for="DateTimeFormat">Date/Time format</label>
    <input class="text-box single-line" id="DateTimeFormat" name="DateTimeFormat" type="text" value="dd.MM.yyyy">
</div>
<div class="grid-2-12">
    <label for="StartDate">Start date</label>
<div>
<input type="text" value="" id="StartDate_container" name="StartDate_container" class="datePicker hasDatepicker">    

  <input id="StartDate" name="StartDate" type="hidden" value="">    <input id="StartDate_local" name="StartDate_local" type="hidden" value="">   
</div>
</div>
<div class="grid-3-12">
    <label for="EndDate">End date</label> 
<div>
<input type="text" value="" id="EndDate_container" name="EndDate_container" class="datePicker hasDatepicker">    

  <input id="EndDate" name="EndDate" type="hidden" value="">    <input id="EndDate_local" name="EndDate_local" type="hidden" value="">    
</div>
</div>
        <div class="command">
            <button class="button" type="submit">View report</button>
        </div>
    </fieldset>
</form>

CSS

{
  height: 3px;
  background-color: #BE4856;
}

#ctLogo 
{
  position: relative;
  display: inline-block;
  top: 20px;
  left: 27px;
  height: 33px;
  width: 141px;
  background-image: url('../Images/custom/logo.png');
}

#ctUser 
{
  float: right;
  height: 20px;
  padding: 0 24px 0 14px;
  margin-right: 10px;
  background-color: #BE4856;
  color: white;  
  line-height: 18px;
  border-radius: 0px 0px 5px 5px;
}

#ctUser a 
{
  text-decoration: none;
  color: white;
}

#ctUser a:hover 
{
  text-decoration: underline; 
}

#ctTopNav 
{
  padding-left: 213px;
  padding-top: 7px;
  overflow: hidden;
  white-space: nowrap;
}

#ctTopNav ul 
{
  list-style-type: none;
}

#ctTopNav li 
{
  float: left;
  white-space: nowrap;
}

#ctTopNav ul a 
{
  line-height: 30px;
  text-decoration: none;
  display: block;
  padding: 0 10px;
  
  border-right: 1px solid silver;
  border-bottom: none;
  border-top: none;
  border-left: none;  
}

.ctTopNavActive 
{
  color: black;
  background-color: #e6e6e6;
  border-top: 1px solid white;
  box-shadow: 0px -1px 0px white;
}

.ctTopNavInActive 
{
  background: #7e7e7e; /* Old browsers */
  background: -moz-linear-gradient(top, #7e7e7e 0%, #545454 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7e7e7e), color-stop(100%,#545454)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #7e7e7e 0%,#545454 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #7e7e7e 0%,#545454 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #7e7e7e 0%,#545454 100%); /* IE10+ */
  background: linear-gradient(top, #7e7e7e 0%,#545454 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7e7e7e', endColorstr='#545454',GradientType=0 ); /* IE6-9 */
  text-shadow: 1px 1px 3px black;
  border-top: 1px solid #e6e6e6;
  color: white;
}

a.ctTopNavInActive:hover  
{  
  background: #7e7e7e; /* Old browsers */
  background:...

JavaScript

$(document).ready(function () {
        var validationRules = {
            
    DateTimeFormat: 'required',
    StartDate: 'required',
    EndDate: 'required'

        };
        var extendedValidationRules = {};
        for (var rule in validationRules) {
            extendedValidationRules[rule] = validationRules[rule];
            if ($("#" + rule + "_container").length) {
                extendedValidationRules[rule + "_container"] = validationRules[rule];
            }
        }
        $("#reportParametersForm").validate({
            rules: extendedValidationRules
        });
        $("#reportParametersForm").submit(function (e) {
            var form = $(this);
            if (form.valid()) {
                var generatedInputs = $('input[id$="_container"], input[id$="_local"]', form);
                generatedInputs.attr("disabled", "disabled");
                var params = form.serialize();
                generatedInputs.removeAttr("disabled");
                var url = '/BOPortal/Reports/View/BusinessSummary?' + params;
                $("#reportPlaceholder").attr("src", url);
            }
            e.preventDefault();
            return false;
        });
    });