JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/jquery.validationEngine.js"></script>
<script src="http://www.position-relative.net/creation/formValidator/js/languages/jquery.validationEngine-en.js"></script>
<link rel="stylesheet" href="http://www.position-relative.net/creation/formValidator/css/validationEngine.jquery.css">
<form action="" method="post" id="rmaForm">
<fieldset>
<legend>RMA Information</legend>
<ul>
<li>
<label>Full Name:</label>
<input class="validate[required]" type="text" name="fullName" id="fullName" maxlength="30" value="">
</li>
<li>
<label>Company:</label>
<select id="company" name="company" class="validate[required]">
<option value=""></option>
<option value="1">select1</option>
<option value="2">select2</option>
<option value="3">select3</option>
<option value="4">select4</option>
</select>
</li>
<li>
<label>New Install?:</label>
<select id="install" name="install" class="validate[required]">
<option value="">Choose an Option...</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</li>
<li>
<label>Notes:</label>
<textarea placeholder="Notes about the return" id="notes" name="notes" rows=5 cols=30 maxlength="400"></textarea>
</li>
</ul>
</fieldset>
<input class="button" type="submit" id="sub" value="Submit" />
</form>
CSS
abel {
float: left;
clear: left;
width: 250px;
text-align: left;
}
input {
display:inline-block;
}
ul li {
list-style-type: none;
margin-bottom: 0.3em;
}
JavaScript
$(document).ready(function () {
// binds form submission and fields to the validation engine
$("#rmaForm").validationEngine({
prettySelect: true,
usePrefix: 's2id_',
autoPositionUpdate: true
});
$("#company").select2({
minimumResultsForSearch: '-1',
width: '12em;',
dropdownAutoWidth: true,
placeholder: "Select an Option...",
blurOnChange: true
});
});