JSFiddle - React, Tailwind, and code Playground

by quangcanh2975

HTML

<!DOCTYPE html>
<html>

  <body>


    <form id="submit_form" method="post">
      <input type='number' id="number" name='number' min="0" max="100" required><br>
      <input type="submit" text="Submit">
    </form>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
    <script>
      $(document).on('input', "#number", function() {
        var regex = /^\d{0,2}(\.\d+)?$/;
        var value = $(this).val();
        if (!regex.test(value)) {
          $(this).val(parseFloat(value.slice(0, 2) + "." + value.slice(2)));
        }
      });

    </script>
  </body>

</html>