JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/additional-methods.js"></script>
<form id="form1" name="form1" method="post" action="">
<table width="800" border="1">
<tr>
<td colspan="2" bgcolor="#5ACDC7">Health Measurements</td>
</tr>
<tr>
<td width="636">Height in cm without shoes</td>
<td width="148">
<label>
<input name="40" type="text" id="40" size="7" maxlength="7" />
</label>
</td>
</tr>
<tr>
<td>Weight in kg without shoes</td>
<td>
<label>
<input name="41" type="text" id="41" size="7" maxlength="7" />
</label>
</td>
</tr>
<tr>
<td>Hip circumference in cm</td>
<td>
<label>
<input name="42" type="text" id="42" size="7" maxlength="7" />
</label>
</td>
</tr>
<tr>
<td>Waist circumference in cm</td>
<td>
<label>
<input name="43" type="text" id="43" size="7" maxlength="7" />
</label>
</td>
</tr>
<tr>
<td>Have you eaten in the last 7 hours?</td>
<td>
<label>
<select name="44" id="44">
<option>Yes</option>
<option>No</option>
</select>
</label>
</td>
</tr>
<tr>
<td>Systolic blood pressure mmHg</td>
<td>
<label>
<input name="45" type="text" id="45" size="7" maxlength="7" />
</label>
</td>
</tr>
<tr>
<td>Diastolic...
CSS
a {
display: block;
position: absolute;
bottom: 0;
}
JavaScript
$.validator.setDefaults({
submitHandler: function () {
alert("submitted!");
}
});
$(document).ready(function () {
$("#form1").validate({
rules: {
40: {
required: true,
minlength: 2,
maxlength: 3
},
41: {
required: true,
minlength: 2,
maxlength: 3
},
42: {
required: true,
minlength: 2,
maxlength: 3
},
43: {
required: true,
minlength: 2,
maxlength: 3
},
44: {
required: true,
minlength: 2,
maxlength: 3
},
45: {
required: true
},
46: {
required: true
},
47: {
required: true
},
48: {
required: true
},
51: {
required: true
},
52: {
required: true
},
},
messages: {
40: {
required: 'Your height in cm without shoes is required',
minlength: 'No less than 2 characters',
maxlength: 'No more than 3 characters'
},
41: {
required: 'Your weight in kg without shoes is required',
minlength: 'No less than 2 characters',
maxlength: 'No more than 3 characters'
},
42: {
required: 'Your hip circumference in cm is required',
minlength: 'No less than 2 characters',
maxlength: 'No more than 3 characters'
},
43: {
required: 'Your waist circumference in cm is required',
minlength: ' No less than 2...