What are the validity properties

The validity property of an input element provides a set of properties related to the validity of data.

1. customError: It returns true, if a custom validity message is set.
2. patternMismatch: It returns true, if an element's value does not match its pattern attribute.
3. rangeOverflow: It returns true, if an element's value is greater than its max attribute.
4. rangeUnderflow: It returns true, if an element's value is less than its min attribute.
5. stepMismatch: It returns true, if an element's value is invalid according to step attribute.
6. tooLong: It returns true, if an element's value exceeds its maxLength attribute.
7. typeMismatch: It returns true, if an element's value is invalid according to type attribute.
8. valueMissing: It returns true, if an element with a required attribute has no value.
9. valid: It returns true, if an element's value is valid.

Practical Code Example

// ValidityState Properties:
const val = input.validity;
console.log(val.valueMissing);    // true if 'required' field is empty
console.log(val.typeMismatch);    // true if not a valid email/url
console.log(val.patternMismatch); // true if regex pattern fails
console.log(val.tooLong);         // true if exceeds maxlength
console.log(val.valid);           // true if all constraints pass