JS Bin // source http://jsbin.com/lomizep

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
body{
  font-family:arial;
}
input{
  height:29px;
  width:199px;
  border:0.5px solid #ccc;
  vertical-align:top;
}
button{
  height:32px;
  background:white none;
  border:0.5px solid #ccc;
  vertical-align:top;
}
</style>
</head>
<body>
<form onsubmit="onsubmit(event)">
  <div>ZIP (US or CA)</div>
  <div>US Format: nnnnn or nnnnn-nnnn</div>
  <div>CA Format: A0A 0A0</div>
<input id='ipt' type="text" required pattern="(\d{5}([\-]\d{4})?)|[A-Za-z][0-9][A-Za-z] [0-9][A-Za-z][0-9]" placeholder='ZIP'/>
  <button type=submit>⮐</button>
  <div id="div"></div>
</form>
  <script id="jsbin-javascript">
function onsubmit(e){
  e.preventDefault();

var ipt = document.getElementById('ipt');

var el = document.getElementById('div').innerHTML = ipt.value + ' matches the US or CA postal code pattern';

ipt.value = '';

ipt.blur();
}
</script>

var ipt = document.getElementById('ipt');

var el = document.getElementById('div').innerHTML = ipt.value + ' matches the US or CA postal code pattern';

ipt.value = '';

ipt.blur();
}
</script></body>
</html>