Password Field
<ef-panel> <ef-header level="3">Password Recommendation</ef-header> <ul> <li>At least 8 characters—the more characters, the better.</li> <li>At least one uppercase and lowercase letters.</li> <li>At least one number.</li> <li>At least one special character.</li> </ul> </ef-panel> <p>Password</p> <ef-password-field id="pw" pattern="^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field> <br> <p>Confirm password</p> <ef-password-field id="confirmedPw" pattern="^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field> <ul id="error-list"> <li id="password-error">Password does not match</li> <li id="pattern-error">Password does not meet criteria</li> </ul>
var pw = document.getElementById('pw'); var confirmedPw = document.getElementById('confirmedPw'); var passwordMatchError = document.getElementById('password-error'); var patternError = document.getElementById('pattern-error'); passwordMatchError.style.display = 'none'; patternError.style.display = 'none'; confirmedPw.addEventListener('value-changed', function(e) { if (e.detail.value !== pw.value) { passwordMatchError.style.display = 'list-item'; } else { passwordMatchError.style.display = 'none'; } }); confirmedPw.addEventListener('error-changed', function(e) { if (e.detail.value) { patternError.style.display = 'list-item'; } else { patternError.style.display = 'none'; } });
ef-panel { max-width: 450px; } ef-password-field { width: 250px; } p { margin: 4px 0; } ul { padding-inline-start: 24px; } #password-error, #pattern-error { color: #d94255; }
ef-password-field
is a form control for passwords with a built-in show/hide toggle functionality.
Basic usage
ef-password-field
behaves similarly to the native password input. It has password masking that allows users to securely type their passwords into the input.
<ef-password-field placeholder="Password ..."></ef-password-field>
Getting value
The value can be accessed through the value
property.
<ef-password-field id="password-input"></ef-password-field>
var passwordInput = document.getElementById("password-input");
passwordInput.value; // User's input password
You can also listen for the value-changed
event, which triggers whenever the value changes due to user interactions.
<ef-password-field id="password-input" placeholder="Type something here .."></ef-password-field> <p>Value: <code id="value-text"></code></p>
var element = document.getElementById("password-input"); var valueChangedText = document.getElementById('value-text'); element.addEventListener("value-changed", function(e) { valueChangedText.innerHTML = e.detail.value; });
ef-password-filed { width: 172px; }
<ef-password-field id="password-input"></ef-password-field>
<p>Value: <code id="value-text"></code></p>
var element = document.getElementById("password-input");
var valueChangedText = document.getElementById("value-text");
element.addEventListener("value-changed", function (e) {
valueChangedText.innerHTML = e.detail.value;
});
Input validation
Validation occurs when the constraints are provided and the value changes. If the error state changes, it will dispatch an error-changed
event along with the current error state.
Alternatively, you can access the error
property to check if the input is valid or not.
Input length
The maxlength
attribute limits the number of characters that can be typed into the input, and the minlength
attribute sets the minimum of characters. ef-password-field
will show error styles if a condition is not met.
<ef-password-field id="passwordInput" minlength="8" maxlength="16" placeholder="Between 8 to 16 characters"></ef-password-field> <p id="error-text"></p>
var element = document.getElementById("passwordInput"); var errorChangedText = document.getElementById('error-text'); element.addEventListener("error-changed", function(e) { if (e.detail.value) { errorChangedText.innerHTML = "Password length must be between 8 - 16 characters"; } else { errorChangedText.innerHTML = ""; } });
#error-text { color: #d94255; } ef-password-field { width: 200px; }
<ef-password-field id="passwordInput" minlength="8" maxlength="16"></ef-password-field>
<p id="error-text"></p>
var element = document.getElementById("passwordInput");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function (e) {
if (e.detail.value) {
errorChangedText.innerHTML = "Password length must be between 8 - 16 characters.";
} else {
errorChangedText.innerHTML = "";
}
});
Pattern
You can use a regular expression to validate the input value by setting it to the pattern
attribute.
<ul> <li>At least 8 characters—the more characters, the better.</li> <li>At least one uppercase and lowercase letters.</li> <li>At least one number.</li> <li>At least one special character.</li> </ul> <ef-password-field id="password" pattern="^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$"></ef-password-field> <p id="error-text"></p>
var element = document.getElementById("password"); var errorChangedText = document.getElementById("error-text"); element.addEventListener("error-changed", function(e) { if (e.detail.value) { errorChangedText.innerHTML = "Password is too weak."; } else { errorChangedText.innerHTML = ""; } });
#error-text { color: #d94255; } ef-password-field { width: 275px; }
<ef-password-field
id="password"
pattern="^(?=.*[A-Z])(?=.*[!@#$&*])(?=.*[0-9])(?=.*[a-z]).{8,}$"
></ef-password-field>
<p id="error-text"></>
var element = document.getElementById("password");
var errorChangedText = document.getElementById("error-text");
element.addEventListener("error-changed", function (e) {
if (e.detail.value) {
errorChangedText.innerHTML = "Password is too weak.";
} else {
errorChangedText.innerHTML = "";
}
});