JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<form id="form" method="post">
<div class="group_d_form_left">
<div class="textinput_mid">
<label for="name">Name:</label>
<input type="input" name="name" id="name" class="longinput" />
</div>
<br /><br />
<div class="textinput_mid">
<label for="email">Email Address:</label>
<input type="input" name="email" id="email" class="longinput email" />
</div>
<br /><br />
<div class="textinput_mid">
<label for="phone">Phone:</label>
<input type="input" name="phone" id="phone" class="medinput" style="display:block; width:145px;" />
</div>
<div class="textinput_mid">
<label for="fax" class="">Fax:</label>
<input type="input" name="fax" class="medinput" style="display:block; width:150px;"/>
</div>
<br /><br />
</div>
<div class="group_d_form_right">
<label for="storageoptions" class="special-label" style="padding-right:5px;">Container or Chassis Size:</label>
<select name="storageoptions" id="storageoptions">
<option value="">Please Select One</option>
<option value="20 Foot">20 Foot</option>
<option value="40 Foot">40 Foot</option>
<option value="40 Foot HC">40 Foot HC</option>
</select>
<br />
<div style="display:block;">
<label...
JavaScript
$(document).ready(function(){
$("#form").validate({
rules: {
"name": {
required: true,
minlength: 3
},
"phone":{
required:true,
digits:true,
minlength: 9
},
"email":{
required: true
},
"storageoptions":{
required: true
},
"quantity":{
required:true,
digits:true
}
},
messages: {
"name": {
required: "Please enter a name"
},
"phone":{
required: "Required field"
},
"email":{
required: "Enter a valid email"
},
"storageoptions":{
required: "Please select an option"
},
"quantity":{
required: "This Field required"
}
},
errorPlacement: function(error, element) {
error.insertBefore(element);
},
submitHandler: function (form) {
$.ajax({
type: 'POST',
data: $(form).serialize(),
url: 'file.php',
success: function () {
form.reset();
$('#submit').hide();
$('#success-line').show().fadeOut(7000, function(){
$('#submit').show("slow");
});
}
});
return false;
}
});
});