<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 class="form-group container"> <label for="exampleInputEmail1">Security Code</label> <input type="text" class="form-control" id="security_code" aria-describedby="emailHelp" placeholder="" data-trigger="manual" data-toggle="tooltip" data-placement="right"> <!--<small id="error_msg" class="form-text text-danger"></small>--> </div>

$(document).ready(function(){ //enable tooltip $("[data-toggle='tooltip']").tooltip(); $("#security_code").blur(function(){ var security_code = $("#security_code").val(); //if (verify_alphanumeric(security_code)===true){ // $("#error_msg").text(" "); //} //else $("#error_msg").text("Invalid Input"); if (verify_alphanumeric(security_code) === false){ $("#security_code").tooltip() .attr("data-original-title", "Invalid Input Format") .tooltip("show"); //alert("No"); } }); }); function verify_alphanumeric(security_code){ var regex = /^[A-Za-z0-9 _.-]+$/; return test = regex.test(security_code); }