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 Password required property
The HTML DOM Input Password required property is associated with the required attribute of an <input> element with type="password". This property sets or returns whether a password field must be filled before form submission. When set to true, the browser prevents form submission if the password field is empty and displays a validation message.
Syntax
Following is the syntax for setting the required property −
passwordObject.required = true|false
Following is the syntax for getting the required property −
var isRequired = passwordObject.required;
Parameters
The required property accepts the following values −
true − The password field must be filled before form submission.
false − The password field is optional and can be left empty.
Return Value
The property returns a Boolean value indicating whether the password field is required (true) or optional (false).
Example − Checking Password Required Property
Following example demonstrates how to check if a password field has the required property set −
<!DOCTYPE html>
<html>
<head>
<title>Password Required Property Check</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Password Required Property</h2>
<p>Check if the password field is mandatory by clicking the button below:</p>
<form action="/Sample_page.php">
<label for="PASS1">Password: </label>
<input type="password" id="PASS1" name="passW" required>
<input type="submit" value="Submit">
</form>
<br>
<button onclick="checkReq()">CHECK REQUIRED STATUS</button>
<p id="result"></p>
<script>
function checkReq() {
var passwordField = document.getElementById("PASS1");
var isRequired = passwordField.required;
if(isRequired) {
document.getElementById("result").innerHTML =
"? The password field must be filled before submitting";
document.getElementById("result").style.color = "red";
} else {
document.getElementById("result").innerHTML =
"? The password field is optional and can be left blank";
document.getElementById("result").style.color = "blue";
}
}
</script>
</body>
</html>
The output shows a password field with a submit button and a check button. Clicking "CHECK REQUIRED STATUS" displays whether the field is mandatory −
Password: [password input field] [Submit] [CHECK REQUIRED STATUS] ? The password field must be filled before submitting
Example − Setting Password Required Property Dynamically
Following example shows how to dynamically set and unset the required property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Password Required Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Toggle Password Required Property</h2>
<form action="/action_page.php">
<label for="userPass">Password: </label>
<input type="password" id="userPass" name="password">
<input type="submit" value="Submit Form">
</form>
<br>
<button onclick="makeRequired()">Make Required</button>
<button onclick="makeOptional()">Make Optional</button>
<button onclick="checkStatus()">Check Status</button>
<p id="status"></p>
<script>
function makeRequired() {
document.getElementById("userPass").required = true;
document.getElementById("status").innerHTML =
"Password field is now REQUIRED";
document.getElementById("status").style.color = "red";
}
function makeOptional() {
document.getElementById("userPass").required = false;
document.getElementById("status").innerHTML =
"Password field is now OPTIONAL";
document.getElementById("status").style.color = "blue";
}
function checkStatus() {
var isReq = document.getElementById("userPass").required;
document.getElementById("status").innerHTML =
"Current status: " + (isReq ? "REQUIRED" : "OPTIONAL");
document.getElementById("status").style.color = isReq ? "red" : "blue";
}
</script>
</body>
</html>
This example allows you to toggle the required property and see the changes in real-time −
Password: [password field] [Submit Form] [Make Required] [Make Optional] [Check Status] Current status: OPTIONAL
Example − Form Validation with Required Password
Following example demonstrates browser validation when a required password field is left empty −
<!DOCTYPE html>
<html>
<head>
<title>Password Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Password Field Validation</h2>
<form action="/login.php" method="post">
<label for="username">Username: </label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password: </label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
<input type="reset" value="Clear Form">
</form>
<br>
<p><strong>Note:</strong> Try submitting the form without filling the password field.
The browser will prevent submission and show a validation message.</p>
<button onclick="togglePasswordRequired()">Toggle Password Required</button>
<p id="info"></p>
<script>
function togglePasswordRequired() {
var passField = document.getElementById("password");
passField.required = !passField.required;
document.getElementById("info").innerHTML =
"Password field is now " + (passField.required ? "REQUIRED" : "OPTIONAL");
}
</script>
</body>
</html>
When you attempt to submit this form without filling the required password field, the browser displays a validation message and prevents submission.
Browser Compatibility
The required property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. The HTML5 form validation works consistently across these browsers.
Key Points
The
requiredproperty can be set both in HTML using therequiredattribute and dynamically via JavaScript.Browser validation occurs automatically when a form with required fields is submitted.
The property returns a Boolean value:
trueif required,falseif optional.When a required password field is empty, the browser prevents form submission and displays a validation message.
You can toggle the required status dynamically using JavaScript to create conditional validation.
Conclusion
The HTML DOM Input Password required property provides an easy way to implement client-side validation for password fields. It ensures users cannot submit forms without providing necessary password information, improving form usability and data quality. The property can be both set in HTML and manipulated dynamically through JavaScript for flexible validation scenarios.
222 Views
