HTML DOM Input Number required Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM input number required property returns and modify whether the input number field must be filled out before submitting the form.

Syntax

Following is the syntax −

  • Returning required

object.required

  • Modifying required

object.required = true | false

Example

Let us see an example of HTML DOM input number required property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.1rem;
   }
   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      color:#db133a;
      font-weight:bold;
  }
</style>
</head>
<body>
<h1>DOM Input number required property Demo</h1>
<form action="">
<p>Hi, Enter your day of birth</p>
<input type="number" class="numberInput" required>
<input type="submit" onclick="checkInput()">
</form>
<div class="show"></div>
<script>
   function checkInput() {
      var numberInput = document.querySelector(".numberInput");
      if(numberInput.value === ''){
         document.querySelector(".show").innerHTML="Please Select";
      }
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on ”Submit” button without entering any value in input number field.

raja
Karthikeya Boyini
Published on 18-Jul-2019 11:33:31
Previous Page Print Page
Next Page  
Advertisements