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”.

				
					<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a class="navbar-brand" href="https://sourcecodester.com">Sourcecodester</a>
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">Limit Password Length Using JavaScript</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-5">
			<form>
				<div class="form-group">
					<label>Username</label>
					<input type="text" id="username" class="form-control"/>
				</div>
				<div class="form-group">
					<label>Password</label>
					<input type="password" class="form-control" id="password" onkeyup="passwordValidate(this)"/>
				</div>
				<span id="chk_length" class="alert-danger">X Password must be a 12 characters long</span>
				<br /><br />
 
				<center><button type="button" id="login" onclick="userLogin();" class="btn btn-primary" disabled="disabled">Login</button></center>
			</form>
		</div>
	</div>
</body>
<script src="js/script.js"></script>
</html>
				
			

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 = "&#10004; 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

Limit Password Length, javascript, free download, source code, free source code,

There you go, we have successfully created this example.

Don’t forget to share this post!

Leave a Comment

Your email address will not be published. Required fields are marked *

Related Article