Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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="([0-9]{5}([-][0-9]{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>
<br>
<br>
MONTH
  <br>
  <input type="text" required pattern='(0[1-9]|1[012])'/>
  <button type=submit>⮐</button>
</form>
  </body>
</html>
 
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;
}
 
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();
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
getsetbropro
0viewers