Skip to content

Instantly share code, notes, and snippets.

@getsetbro

getsetbro/index.html

Created February 8, 2018 15:20
Show Gist options
  • Save getsetbro/3e5c608720e5b7c921a24324fa32f5f5 to your computer and use it in GitHub Desktop.
Save getsetbro/3e5c608720e5b7c921a24324fa32f5f5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/lomizep
Raw
index.html
<!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>
<script id="jsbin-source-css" type="text/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;
}</script>
<script id="jsbin-source-javascript" type="text/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></body>
</html>
Raw
jsbin.lomizep.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;
}
Raw
jsbin.lomizep.js
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment