$(function(){
$('#form').submit(function(){
alert('Thanks!');
});
var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
if (Modernizr.input.pattern) {
return $(document).bind('change', function(e) {
var $el, message, _ref;
$el = $(e.target);
$el[0].setCustomValidity('');
if (_ref = $el[0], __indexOf.call(document.querySelectorAll(':invalid'), _ref) >= 0) {
if (message = $el.data('invalidmessage')) {
return $el[0].setCustomValidity(message);
}
}
});
}
});
<body>
<form action="javascript:;" id="form">
<h3>Please fill in a german zip code (5 numbers)!</h3>
<input pattern="\d{5}" required="required" data-invalidmessage="German zipcodes consist of 5 numbers." id="input" />
<input type="submit">
</form>
</body>
input:focus {
background-color: green;
}
input:focus:invalid {
background-color: red;
}
* {
overflow: hidden;
}
External resources loaded into this fiddle: