tooLong

Summary

Returns whether an input field’s value is longer than is allowed by the maxlength attribute.

Property of dom/ValidityState dom/ValidityState

Syntax

Note: This property is read-only.

var result = element.validity.tooLong;

Return Value

Returns an object of type BooleanBoolean

Whether a value is longer than is allowed by the maxlength attribute.

Examples

In the following example the tooLong property is used to validate the length of text entered into a text area. However, the validity.tooLong is always false since text greater than the maxlength attribute value cannot be entered.

<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>validity.tooLong</title>
</head>

<body>
<form name="frmtwit" id="frmtwit">
<label>Message:<br><textarea id="txtMessage" maxlength="12"></textarea></label>
<input type="submit" value="Twit..">
</form>
<script type="text/javascript">
function validLength(evt){
var el=evt.target;
if(el.validity){
// html5 aware browsers
if(el.validity.tooLong){
el.setCustomValidity('Your twit is too long to be sent.');
}else{
el.setCustomValidity("");
}
}else{
// legacy validation

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


</body></html>

Usage

 There seems to be little usage for the tooLong validity state test as textarea and input elements do not allow text input past the maxlength value.

Related specifications

W3C HTML5: Working Draft
WHATWG HTML: Living Standard

Attributions

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