Limit Password Length
Limit Password Length Using JavaScript
Details: Limit Password Length
Choosing good passwords is essential to online security. Long complex passwords are more secure, but it can be difficult to remember long passwords without writing them down. In response, many people choose shorter complicated passwords. Choosing between longer, shorter, and shorter complicated passwords is a matter of personal choice, but there are ways to limit the length of each.
The below code will enable the restriction of the inputted user password. Only what is needed is to compare the length of the textbox and the maximum length in the if statement. Carefully follow the procedures below to learn more.
You will need to download the bootstrap framework using this link: https://getbootstrap.com/.
Interface: Limit Password Length
To recreate this interface of the application, copy and paste these codes into your text editor and save as “index.html”.
Limit Password Length Using JavaScript
Create the Script
The code contains the script of the application. The code will restrict the password length when the user clicks the button. To do this simply duplicate and compose this block of codes inside the text editor, then save it as script.js inside the js folder.
function passwordValidate(input){
var chk_length = document.getElementById('chk_length');
var bool_length;
var password = input.value;
if(password.length > 12){
chk_length.removeAttribute('class');
chk_length.setAttribute('class', 'alert-success');
chk_length.innerHTML = "✔ Password must be a 12 characters long";
bool_length = true;
}else{
chk_length.removeAttribute('class');
chk_length.setAttribute('class', 'alert-danger');
chk_length.innerHTML = "X Password must be a 12 characters long";
bool_length = false;
}
if(bool_length){
document.getElementById('login').removeAttribute('disabled');
}else{
document.getElementById('login').setAttribute('disabled', 'disabled');
}
}
function userLogin(){
var username=document.getElementById('username').value;
var password=document.getElementById('password').value;
if(username==""){
alert("Username must not be empty");
}else{
alert("You have login!");
window.location='index.html';
}
}
Output
There you go, we have successfully created this example.