<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div style="width:450px"> <div style="float:left"> <form id="eg" action="/"> <table> <tr> <td> <label>Name:</label> </td> <td> <input type="text" placeholder="user name" id="name" /> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="test" onclick="return false;" /> </td> </tr> </table> </form> </div> </div>

.showerror { display:block; } .noshowerror { display:none; } .remerr { display:none; } .redborder { border:#F00 solid 1px; } .greenborder { border:#0F3 solid 1px; }

$(document).ready(function () { $('#name').blur(function () { var nameRegex = /^[A-Za-z]+$/; // var fname = document.getElementById("name").value; var fname = $("#name").val(); alert(nameRegex.test(fname)); if (!(nameRegex.test(fname))) { $("#name").removeClass('greenborder').addClass('redborder'); } else if (fname == " ") { $("#name").removeClass('greenborder').addClass('redborder'); } else { $("#name").removeClass('redborder').addClass('greenborder'); return false; } }); });