JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.js"></script>
<form id="myform" method="#">
<li>
<label for="field1">Mileage</label>
<input type="text" name="field1" class="non_neg_int" />
</li>
<li>
<label for="field2">VIN (Vehicle Identification Number)</label>
<input type="text" name="field2" class="vin" maxlength="17"/>
</li>
<li>
<input type="submit" />
</li>
</form>
JavaScript
$(document).ready(function () {
$("#myform").validate({
onkeyup: false,
ignore: [],
submitHandler: function (form) { // for demo
alert('valid form submitted'); // for demo
return false; // for demo
}
});
jQuery.validator.addMethod("vin", function (value, element) {
return this.optional(element) || (/^[A-HJ-NP-Z0-9]{17}$/.test(value));
}, "Must be a valid VIN");
jQuery.validator.addMethod("non_neg_int", function (value, element) {
return this.optional(element) || !(isNaN(value) || value === null || value === "" || value < 0 || !is_int(value));
}, "Must be a nonnegative integer");
function is_int(value) {
if ((parseFloat(value) === parseInt(value, 10)) && !isNaN(value)) {
return true;
} else {
return false;
}
}
});