JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<input type="text" id="url" />

CSS

input:focus {
  outline: none;
}

.invalid {
  border-color: red;
}

JavaScript

var pattern = new RegExp(/(?:^|[^@\.\w-])([a-z0-9]+:\/\/)?(\w(?!ailto:)\w+:\w+@)?([\w.-]+\.[a-z]{2,4})(:[0-9]+)?(\/.*)?(?=$|[^@\.\w-])/i
);

$('#url').on('input change blur keyup', function () {
	if (pattern.test($(this).val())) {
	  $(this).removeClass('invalid');
  } else {
	  $(this).addClass('invalid');
  }
});