HTML DOM Input Email required Property

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 −

booleanValue	Details
true	It is compulsory to set the email field to submit form.
false	It is the default value and to set an email field is not compulsory.

Example

Let us see an example of Input Email required property −

<!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>

Output

This will produce the following output −

Clicking ‘Send Mail’ button −

HTML DOM Input Email required Property

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

HTML DOM Input Email required Property