Test 'input' event

by younesalouani

HTML

<input id="my-text-box"></input>
<div id="messages" style="white-space:pre;"></div>

JavaScript

var input = document.querySelector('#my-text-box');

var messages = document.querySelector('#messages');

input.addEventListener('input', function()
{
    messages.textContent = 'url is valid: ' + ValidURL(String(input.value)) + '\n';
});

function ValidURL(str) {
  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}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}