YouTipJs Validation Api
# JavaScript Validation API
* * *
## Constraint Validation DOM Methods
| Property | Description |
| --- | --- |
| checkValidity() | Returns true if the data in an input element is valid, otherwise returns false. |
| setCustomValidity() | Sets the validationMessage property of an input element, used to set a custom error message. After setting a custom message with setCustomValidity, validity.customError becomes true, and checkValidity will always return false. To re-validate, you need to clear the custom message as follows: setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined) |
The following example returns an error message if the input information is invalid:
## checkValidity() Method
function myFunction(){var inpObj = document.getElementById("id1"); if(inpObj.checkValidity() == false){document.getElementById("demo").innerHTML = inpObj.validationMessage; }}
[Try it »](#)
* * *
## Constraint Validation DOM Properties
| Property | Description |
| --- | --- |
| validity | A boolean property that returns whether the input value is valid. |
| validationMessage | The browser's error message. |
| willValidate | Specifies whether the input needs to be validated. |
* * *
## Validity Properties
The **validity property** of an input element contains a series of validity data properties:
| Property | Description |
| --- | --- |
| customError | Set to true if a custom validity message has been set. |
| patternMismatch | Set to true if the element's value does not match its pattern attribute. |
| rangeOverflow | Set to true if the element's value is greater than the maximum set. |
| rangeUnderflow | Set to true if the element's value is less than its minimum. |
| stepMismatch | Set to true if the element's value is not set according to the specified step attribute. |
| tooLong | Set to true if the element's value exceeds the length set by the maxLength attribute. |
| typeMismatch | Set to true if the element's value is not of the expected type. |
| valueMissing | Set to true if the element (with the required attribute) has no value. |
| valid | Set to true if the element's value is valid. |
* * *
## Examples
If the input value is greater than 100, display a message:
## rangeOverflow Property
function myFunction(){var txt = ""; if(document.getElementById("id1").validity.rangeOverflow){txt = "The value is too large"; }document.getElementById("demo").innerHTML = txt; }
[Try it »](#)
If the input value is less than 100, display a message:
## rangeUnderflow Property
functi