html - CSS for a jQuery Vin Validation -

html - CSS for a jQuery Vin Validation -

so have jquery function validates whether or not vin valid.. looking seek figure out css circle text box , give greenish check mark if right or if not right reddish border reddish x. link towards bottom has how want cannot figure out help appreciated. http://bootstrapvalidator.com/validators/vin/

$(function() { $("#vin").on("keyup blur", function() { if (validatevin($("#vin").val())) $("#result").html("that's vin"); else $("#result").html("not vin"); }); }); function validatevin(vin) { var re = new regexp("^[a-hj-npr-z\\d]{8}[\\dx][a-hj-npr-z\\d]{2}\\d{6}$"); homecoming vin.match(re); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label name="vin">vin</label> <input type="text" id="vin" value="1fafp40634f172825" /> <span id="result"></span>

example snippet here http://stackoverflow.com/a/26408196/4122820

you can add together or remove css class.. seek this:

class="snippet-code-js lang-js prettyprint-override">$(function() { $("#vin").on("keyup blur", function() { if (validatevin($("#vin").val())) { $("#result").html("that's vin"); $("#vin").removeclass("not-ok").addclass("ok"); } else { $("#result").html("not vin"); $("#vin").removeclass("ok").addclass("not-ok"); } }); }); function validatevin(vin) { var re = new regexp("^[a-hj-npr-z\\d]{8}[\\dx][a-hj-npr-z\\d]{2}\\d{6}$"); homecoming vin.match(re); } class="snippet-code-css lang-css prettyprint-override">.ok { border: 1px solid #090; background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqradfem_skozyavlggveix37wksh14dexwlht1uqu4piljxtuo) no-repeat center right; } .not-ok { border: 1px solid #900; background: url(https://encrypted-tbn3.gstatic.com/images?q=tbn:and9gcrx3biogukepsfxbath8umzsh0xhajudossaagpk2a4-hfmzxhwbq) no-repeat center right; } class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <label name="vin">vin</label> <input type="text" id="vin" value="1fafp40634f172825" /> <span id="result"></span>

jquery html css