JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<div class="form">
<form id="contact" action="http://www.jetbookingdirect.com/mob/contactengine.php" method="post">
<input type="text" class="required" minlength="2" id="name" name="name" value=""/>
<input id="cemail" name="email" class="required email" />
<input type="text" id="numberinput" name="number" value="" placeholder="Number (incl Country code)..." />
</div>
</section>
<section>
<h2>Flight Details</h2>
<div class="form">
<input type="text" class="required" minlength="2" id="from" name="from" value=""/>
<input type="text" class="singleinput" id="toinput" name="to" value=""/>
</div>
</section>
<section>
<div class="form">
<label for="email">How many passengers?</label>
<input type="number" id="paxinput" name="pax"
min="1"
max="500"
step="2"
value="1">
</div>
</section>
<section>
<div class="form">
<label for="email">Departure Date and Time - Please enter time in 24 hour format</label>
<select name="depday" id="depday">
<option value="1" >1</option>
<option value="2" >2</option>
<option value="3" >3</option>
<option value="4" >4</option>
<option value="5" >5</option>
<option value="6" >6</option>
<option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
<option value="10" >10</option>
<option value="11" >11</option>
<option value="12" >12</option>
<option value="13" >13</option>
<option value="14" >14</option>
<option value="15" >15</option>
<option value="16" >16</option>
<option value="17" >17</option>
<option value="18" >18</option>
<option value="19" >19</option>
<option value="20" >20</option>
<option value="21" >21</option>
<option value="22" >22</option>
<option value="23" >23</option>
<option value="24" >24</option>
<option value="25" >25</option>
<option value="26" >26</option>
<option...
CSS
a.pagebutton {
padding:6px;
color:#444;
text-shadow:1px 1px 1px #FFF;
text-align:center;
padding-left:45px;
padding-right:45px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,199,199,1)), color-stop(14%,rgba(208,208,208,1)), color-stop(50%,rgba(220,220,220,1)), color-stop(83%,rgba(220,220,220,1)), color-stop(100%,rgba(201,201,201,1)));
}
a.pagebutton:hover {
-webkit-box-shadow: inset 0px 0px 8px 10px rgba(0,0,0,0.3);
box-shadow: inset 0px 0px 8px 10px rgba(0,0,0,0.3);
}
.form,.bottomform {
float:left;
background-color:#1e2427;
margin:0 auto 40px;
width:300px;
padding:10px;
background: -moz-linear-gradient(top, rgba(181,181,181,1) 0%, rgba(239,239,239,1) 46%, rgba(201,201,201,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,181,181,1)), color-stop(46%,rgba(239,239,239,1)), color-stop(100%,rgba(201,201,201,1)));
background: -webkit-linear-gradient(top, rgba(181,181,181,1) 0%,rgba(239,239,239,1) 46%,rgba(201,201,201,1) 100%);
}
.bottomform {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199,199,199,1)), color-stop(14%,rgba(208,208,208,1)), color-stop(50%,rgba(220,220,220,1)), color-stop(83%,rgba(220,220,220,1)), color-stop(100%,rgba(201,201,201,1)));
}
footer {
position:relative;
bottom:0;
width:100%;
float:left;
}
input[type="text"],.email,input[type="email"],input[type="number"],input[type="submit"],input[type="reset"],label{
background: -moz-linear-gradient(top, rgba(107,107,107,1) 0%, rgba(149,149,149,1) 39%, rgba(149,149,149,1) 79%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(107,107,107,1)), color-stop(39%,rgba(149,149,149,1)), color-stop(79%,rgba(149,149,149,1)));
background: -webkit-linear-gradient(top, rgba(107,107,107,1)...
JavaScript
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate the comment form when it is submitted
$("#contact").validate();
$("#from").rules("add", {
minlength: 2
});
});