YPNNwx

index.html

<div class="overlay">
  <h1 class="overlay__title">URL input field demo</h1>
  <label for="urlKey">URL key</label>
  <input id="urlKey" class="input--url">
  <p class="msg--error">Sorry, only letters, numbers and hyphens are allowed.</p>
</div>

script.js

$("#urlKey").on("keydown", function(e){
  
  if(e.keyCode === 32)
  {
    e.preventDefault();
    $(this).val($(this).val() + "-");
  }
  
}).on("keyup", function(e){
  
  
  if($(this).val().match(/\+|\.|\*|\#/g))
  {
    $("#urlKey, .msg--error").addClass("is-error");
  }
  else
  {
    $("#urlKey, .msg--error").removeClass("is-error");
  }
});

style.css

* { box-sizing:border-box; }

.overlay
{
  width:450px;
  margin:20px auto;
  padding:16px;
  background:rgb(48,48,48);
  box-shadow:0 0 14px 2px rgba(0,0,0,.6);
  font-family:sans-serif;
  font-weight:normal;
  color:white;
}

.overlay__title
{
  margin-bottom:13px;
  font-size:18px;
}

label
{
  display:block;
  font-size:13px;
  line-height:24px;
}

.input--url
{
  display:block;
  width:100%;
  height:40px;
  padding:4px 11px;
  border:0 none;
  font-size:18px;
}

.input--url.is-error
{
  box-shadow:inset 0 0 0 2px #FB5E5B;
}

.input--url:focus
{
  outline:0;
}

.input--url.is-error:focus
{
  background:#F9EEEE;
}

.msg--error
{
  margin:6px 0 13px;
  font-size:13px;
  color:#FC5F5C;
  opacity:0;
  transition:opacity .3s ease-in-out, box-shadow .3s ease-in-out;
}

.is-error
{
  opacity:1;
}

YPNNwx.markdown

YPNNwx

A Pen by Thomas Nägele on CodePen.

License.