Dual validation

<!DOCTYPE>
<html>
    <head>
        <title>Web form validation</title>
        <script>
           function checkNumber() {
               let number = parseInt(document.getElementById("num").value);
               if (number >= 1 && number <= 10){
                   return true;
               } else {
                   alert("Invalid data!");
                   document.getElementById("num").value = "";
                   return false;
               }
           }
        </script>
    </head>
    <body>
       <h2>Validate number</h2>
       <form action="#" method="post" onsubmit="return checkNumber()">
          Number:
          <input type="text" name="num" id="num">
          <input type="submit" name="check" value="Check number">
       </form>
       <?php
          if (isset($_POST["check"])){
              $num = $_POST["num"];
              if (is_numeric($num) && $num >= 1 && $num <= 10) {
                  echo "<p id='info' style='color:green;'>Your number ". $num ." is valid!</p>";
              } else {
                  echo "<p id='info' style='color:red;'>Your number ". $num ." is invalid!</p>";
              }
          }
       ?>
    </body>
</html>