HTML DOM Input Email required Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input Email required property determines whether Input Email is compulsory to set or not.

Syntax

Following is the syntax −

  • Returning boolean value - true/false
inputEmailObject.required
  • Setting required to booleanValue
inputEmailObject.required = booleanValue

Boolean values

Here, “booleanValue” can be the following −

booleanValueDetails
trueIt is compulsory to set the email field to submit form.
falseIt is the default value and to set an email field is not compulsory.

Example

Let us see an example of Input Email required property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input Email required</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<h1>Compose Mail</h1>
<fieldset>
<legend>Email-required</legend>
<label for="EmailSelect">Email Id :
<input type="email" id="EmailSelect" required>
</label><br>
<label for="textarea">Message :
<textarea id="textarea" rows="2" cols="20" name="message" placeholder="Type message..."></textarea></label><br>
<input type="button" onclick="showMessage()" value="Send Mail">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputEmail = document.getElementById("EmailSelect");
   function showMessage() {
      if(inputEmail.required === true && inputEmail.value === '')
         divDisplay.textContent = 'Cannot Send Mail: Email Id Required';
      else
         divDisplay.textContent = 'Mail Sent';
   }
</script>
</body>
</html>

This will produce the following output −

Clicking ‘Send Mail’ button −

After clicking ‘Send Mail’ button with value of an email field set −

raja
Published on 24-Jul-2019 15:26:14
Advertisements