JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jquery.bassistance.de/validate/lib/jquery-1.7.2.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form accept-charset="UTF-8" action="/locations/search" data-remote="true" id="company_form" method="post" name="company_form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<table>
<tr>
<th>Company</th>
<th>City</th>
<th>Country</th>
<th>ZipCode</th>
</tr>
<tr>
<td><input id="company" name="company" type="text" /></td>
<td><input id="city" name="city" type="text" /></td>
<td><input id="country" name="country" type="text" /></td>
<td><input id="zipcode" name="zipcode" type="text" /></td>
<td><input name="commit" type="submit" value="search" /></td>
</tr>
</table>
</form>
CSS
#company_form { width: 500px; }
#company_form label { width: 250px; }
#company_form label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
margin-left: 10px;
width: auto;
display: inline;
}
#newsletter_topics label.error {
display: none;
margin-left: 103px;
}
JavaScript
$(document).ready(function() {
// validate the comment form when it is submitted
// validate signup form on keyup and submit
$("#company_form").validate({
rules: {
"company": {required:true}
},
messages:{
company: "Enter Company name"
}
});
});