//////// CSS
<style>
.validated_ok{border:1px solid green}
.validated_error{border:1px solid red}
.validated_okT{color:green}
.validated_errorT{color:red}
</style>
//////////////// HTML
<input type="text" class="cf_required" style='width:80%' name='website'>
<br>
<span id="urlsv"></span>
/////////////JS
<script>
$(document).ready(function () {
$(".cf_required[name='website']").focusout(function () {
console.log("Hi");
var myVariable = $(this).val();
var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|' + // domain name
'((\\d{1,3}\\.){3}\\d{1,3}))' + // ip (v4) address
'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + //port
'(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
'(\\#[-a-z\\d_]*)?$', 'i');
if (pattern.test(myVariable)) {
$("#urlsv").html("Msg: Valid");
$("#urlsv").addClass("validated_okT").removeClass("validated_errorT");
$(this).addClass("validated_ok").removeClass("validated_error");
console.log("Hello");
} else {
$("#urlsv").html("Msg: Inalid");
$("#urlsv").removeClass("validated_okT").addClass("validated_errorT");
$(this).removeClass("validated_ok").addClass("validated_error");
console.log("bye");
}
});
});
</script>
///////////////// Result
