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