A Pen by Nathan Bingham.

A-Pen-by-Nathan-Bingham.markdown

A Pen by Nathan Bingham

A Pen by Nathan Bingham on CodePen.

License.

index.html

<div class="bar">
<input class="urlBar" type="text" value="" placeholder="enter a URL" />

<div class="isUrl">URL?</div>
  
</div>

script.js

//https://code.google.com/p/js-uri/
//http://mathiasbynens.be/demo/url-regex

// Should Fail
//http://....aa.
//http://foo.bar?q=Spaces should be encoded
//http://foo.bar/foo(bar)baz quux
//http://-error-.invalid/
//www.google.baz (TLDs that do not exist work)

// Should pass
//http://userid:password@example.com:8080/
//http://✪df.ws/123
//http://مثال.إختبار
//http://例子.测试
//http://223.255.255.254
//http://142.42.1.1:8080/
//http://उदाहरण.परीक्ष
//http://-.~_!$&'()*+,;=:%40:80%2f::::::@example.com

var validUri = function(uri) {
    
  var regEx = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
                                                             if(  uri.match(regEx)  ){
     return true;
  } else {
    return false;
  }
  
};

$(function(){

  var $urlBar = $('.urlBar');
  var $bar = $('.bar');
  var $isUrl = $('.isUrl');
  
  $urlBar.keyup(function(){

    var result = $urlBar.val();
    var valid = validUri(result);

    console.log('valid',valid);
    
    if(valid){
      $bar.removeClass('is').addClass('is')
      $isUrl.html("URL!");
    } else {
      $bar.removeClass('is')
      $isUrl.html("URL?");
    }
  
  });
});

style.css

body {
  background: #2ac56c;
}

.isUrl {
  width:5%;
  color: #fff;
  padding: 25px 60px 25px 90px;
  margin:0 auto 0 auto;
  
  background:#cb4e4e;
  
  text-shadow: 1px 1px rgba(0,0,0,0.2);
  
  text-transform:uppercase;
}

.is .isUrl {
    background: #17aa56;
}

.urlBar {
  background:#f2f2f2;
  display:block;
  width:75%;
  border:0;
  padding:20px 10px;
  margin:2em auto;
  
  font-size:1em;
}

.is .urlBar {
  border:solid 3px #17aa56;
}