How to validate input number with validation API in JavaScript

<!DOCTYPE html>
<html>
<body>

<p>Enter a number between 1 to 100:</p>

<input id="input-number-id" type="number" min="1" max="100">
<button onclick="checkFunction()">OK</button>

<p id="message-id"></p>

<script>
function checkFunction() 
{
    var obj = document.getElementById("input-number-id");
    if (obj.checkValidity() == false) 
        document.getElementById("message-id").innerHTML = obj.validationMessage;
    else 
        document.getElementById("message-id").innerHTML = "Input OK";
} 
</script>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jun 29, 2015 by avibootz
edited Jun 29, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<p>Enter a number - max 300:</p>

<input id="input-number-id" type="number" max="300">
<button onclick="checkFunction()">OK</button>

<p id="message-id"></p>

<script>
function checkFunction() 
{
    var msg = "";

    if (document.getElementById("input-number-id").validity.rangeOverflow) 
        msg = "Value too big";
    else 
        msg = "Input OK";
     
    document.getElementById("message-id").innerHTML = msg;
} 
</script>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jun 29, 2015 by avibootz
edited Jun 29, 2015 by avibootz

<!DOCTYPE html>
<html>
<body>

<p>Enter a number - min 20:</p>

<input id="input-number-id" type="number" min="20">
<button onclick="checkFunction()">OK</button>

<p id="message-id"></p>

<script>
function checkFunction() 
{
    var msg = "";
   
    if (document.getElementById("input-number-id").validity.rangeUnderflow) 
        msg = "Value too small";
    else 
        msg = "Input OK";
     
    document.getElementById("message-id").innerHTML = msg;
} 
</script>

</body>
</html>

70+ SQL courses for beginners and professionals

answered Jun 29, 2015 by avibootz

Most popular tags

How to validate input number with validation API in JavaScript

3 Answers

Related questions