Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Email required Property
The HTML DOM Input Email required property determines whether an email input field must be filled out before submitting a form. This property corresponds to the required HTML attribute and provides a way to access and modify the required state of email input elements using JavaScript.
Syntax
Following is the syntax for getting the required property value −
inputEmailObject.required
Following is the syntax for setting the required property −
inputEmailObject.required = booleanValue
Parameters
The booleanValue parameter can be one of the following values −
| Value | Description |
|---|---|
| true | The email field is required and must be filled out before form submission. |
| false | The email field is optional (default value). |
Return Value
The property returns a Boolean value −
-
trueif the email input is required -
falseif the email input is not required
Example − Getting Required Property
Following example demonstrates how to check if an email input field is required −
<!DOCTYPE html>
<html>
<head>
<title>Input Email Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Check Email Required Status</h2>
<form>
<label for="email1">Required Email:</label>
<input type="email" id="email1" required><br><br>
<label for="email2">Optional Email:</label>
<input type="email" id="email2"><br><br>
<button type="button" onclick="checkRequired()">Check Required Status</button>
<p id="result"></p>
</form>
<script>
function checkRequired() {
var email1 = document.getElementById("email1");
var email2 = document.getElementById("email2");
var result = document.getElementById("result");
result.innerHTML = "Email1 required: " + email1.required + "<br>" +
"Email2 required: " + email2.required;
}
</script>
</body>
</html>
The output shows the required status of both email fields −
Email1 required: true Email2 required: false
Example − Setting Required Property
Following example shows how to dynamically set the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Set Email Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Email Required Status</h2>
<form>
<label for="userEmail">Email Address:</label>
<input type="email" id="userEmail" placeholder="Enter your email"><br><br>
<button type="button" onclick="makeRequired()">Make Required</button>
<button type="button" onclick="makeOptional()">Make Optional</button>
<button type="button" onclick="checkStatus()">Check Status</button>
<p id="status"></p>
</form>
<script>
var emailField = document.getElementById("userEmail");
var status = document.getElementById("status");
function makeRequired() {
emailField.required = true;
status.textContent = "Email field is now required.";
}
function makeOptional() {
emailField.required = false;
status.textContent = "Email field is now optional.";
}
function checkStatus() {
status.textContent = "Current status: " + (emailField.required ? "Required" : "Optional");
}
</script>
</body>
</html>
The buttons allow you to toggle the required status and see the changes reflected immediately.
Example − Form Validation with Required Email
Following example demonstrates form validation using the required property −
<!DOCTYPE html>
<html>
<head>
<title>Email Required Validation</title>
<style>
.form-container {
width: 400px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.error { color: red; }
.success { color: green; }
</style>
</head>
<body>
<div class="form-container">
<h2>Contact Form</h2>
<form>
<label for="contactEmail">Email Address:</label><br>
<input type="email" id="contactEmail" required style="width: 100%; padding: 5px; margin: 5px 0;"><br><br>
<label for="message">Message:</label><br>
<textarea id="message" rows="3" style="width: 100%; padding: 5px;" placeholder="Your message..."></textarea><br><br>
<button type="button" onclick="validateAndSubmit()">Submit</button>
<p id="message-display"></p>
</form>
</div>
<script>
function validateAndSubmit() {
var emailField = document.getElementById("contactEmail");
var messageDisplay = document.getElementById("message-display");
if (emailField.required && emailField.value.trim() === "") {
messageDisplay.innerHTML = '<span class="error">Error: Email address is required!</span>';
} else if (emailField.value.trim() !== "" && !emailField.validity.valid) {
messageDisplay.innerHTML = '<span class="error">Error: Please enter a valid email address!</span>';
} else {
messageDisplay.innerHTML = '<span class="success">Form submitted successfully!</span>';
}
}
</script>
</body>
</html>
This example validates both the required status and email format before allowing form submission. If the email field is empty and required, or if the email format is invalid, appropriate error messages are displayed.
When empty: Error: Email address is required! When invalid: Error: Please enter a valid email address! When valid: Form submitted successfully!
Browser Compatibility
The Input Email required property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The property works consistently across platforms and provides reliable form validation functionality.
Conclusion
The HTML DOM Input Email required property provides a JavaScript interface to control whether an email input field must be filled before form submission. It returns a Boolean value indicating the current required state and allows dynamic modification of the required attribute, enabling flexible form validation and user experience control.
196 Views
