JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<div class="container">

  <form id="myForm">
    <input type="number" name="number" id="number" placeholder="Age" min="18" max="99">
    
    <span id="number-error"></span>
    
    <br>
    
    
<!--    
    <input type="email" name="email" required placeholder="[email protected]"><br>

    <input type="text" name="zipcode" placeholder="Zipcode" pattern="[0-9]{5}"><br>
    <input type="text" name="username" placeholder="User name" required title="Please enter your username"><br>



        <label for="button">button:</label><br>
        <input type="button" name="button" id="button" value="button">

        <hr>

        <label for="checkbox">checkbox:</label><br>
        <input type="checkbox" name="checkbox" id="checkbox" placeholder="checkbox">

        <hr>

        <label for="color">color:</label><br>
        <input type="color" name="color" id="color" placeholder="color">

        <hr>

        <label for="date">date:</label><br>
        <input type="date" name="date" id="date" placeholder="date">

        <hr>

        <label for="datetime-local">datetime-local:</label><br>
        <input type="datetime-local" name="datetime-local" id="datetime-local" placeholder="datetime-local">

        <hr>

        <label for="email">email:</label><br>
        <input type="email" name="email" id="email" placeholder="email">

        <hr>

        <label for="file">file:</label><br>
        <input type="file" name="file" id="file" placeholder="file">

        <hr>

        <label for="hidden">hidden:</label><br>
        <input type="hidden" name="hidden" id="hidden" placeholder="hidden">

        <hr>

        <label for="image">image:</label><br>
        <input type="image" name="image" id="image" placeholder="image">

        <hr>

        <label...

CSS

html,body {
  color: #454545;
}

.container {
  margin-top: 5%;
}

input {
  width: 100%;
}

JavaScript

function validateForm() {
     /*
       const form = document.getElementById("myForm");
       if (form.checkValidity()) {
         alert("Form is valid and can be submitted.");
       } else {
         alert("Form is not valid. Please correct the errors.");
       }
       */


     const form = document.getElementById("number")

     let text;




     // Check if the attribute exists
     if (form.hasAttribute("min")) {
       // Get the value of the attribute
       var range = "min: " + form.getAttribute("min");

}

     // Check if the attribute exists
     if (form.hasAttribute("max")) {
       // Get the value of the attribute
       var text = "max: " +form.getAttribute("max");

       maxrangevalue += range;

     }








     if (form.validity.rangeOverflow || form.validity.rangeUnderflow) {
       text = "Range only between :" + minrangevalue + " and " + maxrangevalue + " is accepted";
     }

     document.getElementById("number-error").innerHTML = text;





   }