patternMismatch

Summary

Returns whether the input field value does not match the rules defined by the pattern attribute.

Property of dom/ValidityState dom/ValidityState

Syntax

Note: This property is read-only.

var result = element.validity.patternMismatch;

Return Value

Returns an object of type BooleanBoolean

Whether a value does not match the rules defined by the pattern attribute.

Examples

The following example validates a UK Postal code field on the blur event handler. If an invalid UK postal code is entered, when the form is submitted the custom validity message is displayed.

<script type="text/javascript">
function validatePostCode(evt){
var el=evt.target;
if(el.validity){
// HTML5 aware browsers
if(el.validity.patternMismatch){
el.setCustomValidity('Not a valid UK Postal Code.eg:G1 1AA ');
}else{
el.setCustomValidity("");
}
}else{
// fallback for legacy browsers.


}
}
document.getElementById('txtPostcode').addEventListener('blur',validatePostCode,false);
</script>

Related specifications

W3C HTML5: Working Draft
WHATWG HTML: Living Standard

Attributions

Microsoft Developer Network: [patternMismatch Property Article]
Portions of this content come from HTML5Rocks! [Making forms fabulous article]