JavaScript - Validation API

There is a checkValidity() method in the latest version of javascript which works well with HTML5. By using the new HTML5 form field attributes, you can check to see if the data submitted meets this criteria.

https://www.w3schools.com/js/js_validation_api.asp

Enter a number between 10 and 100.

function myFunction()
{
    let input = document.getElementById("txtNumber");
    if (input.checkValidity() === false)
    {
        document.getElementById("demo1").innerHTML = input.validationMessage;
    }
}

You also chose to use some of the validity properties to test against.

• customError - Set to true, if a custom validity message is set.
• patternMismatch - Set to true, if an element's value does not match its pattern attribute.
• rangeOverflow - Set to true, if an element's value is greater than its max attribute.
• rangeUnderflow - Set to true, if an element's value is less than its min attribute.
• stepMismatch - Set to true, if an element's value is invalid per its step attribute.
• tooLong - Set to true, if an element's value exceeds its maxLength attribute.
• typeMismatch - Set to true, if an element's value is invalid per its type attribute.
• valueMissing - Set to true, if an element (with a required attribute) has no value.
• valid - Set to true, if an element's value is valid.