Password validation

Developer
Dave
Size
3,866 Kb
Views
14,168
  1. Password validation Previews
  2. Password validation HTML Codes
  3. Password validation CSS Codes
  4. Password validation JS Codes

How do I make an password validation?

What is a password validation? How do you make a password validation? This script and codes were developed by Dave on 25 November 2022, Friday.

Password validation Previews
IQ Test

Password validation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Password validation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <label for="id_password">Password</label>
<input id="id_password" type="password" name="password" value="" class="js-password" data-error-list-id="id_password_errors" data-confirm-id="id_confirm_password">
<div id="id_password_errors" class="error-message"> <h3>Password must have at least:</h3> <ul> <li class="js-password-length is-hidden">8 Characters</li> <li class="js-password-upper is-hidden">1 uppercase character</li> <li class="js-password-lower is-hidden">1 lowercase character</li> <li class="js-password-number is-hidden">1 number</li> </ul>
</div>
<!-- <div class="tooltip"> <h3>Password must have at least:</h3> <ul> <li>8 Characters</li> <li>1 uppercase character</li> <li>1 lowercase character</li> <li>1 number</li> </ul>
</div> -->
<div> <label for="id_confirm_password">Confirm password</label> <input id="id_confirm_password" type="password" name="password" value="" class="js-match-input-values" data-match-id="id_password"> <p class="error-message">Passwords do not match</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Password validation - Script Codes CSS Codes

.is-invalid { border: solid 1px #c00;
}
.error-message { color: #c00; display: none;
}
.is-hidden { display: none;
}
.is-invalid + .error-message { display: block;
}

Password validation - Script Codes JS Codes

'use strict';
// Checks
var isLongEnough = function isLongEnough(val) { var min = arguments.length <= 1 || arguments[1] === undefined ? 8 : arguments[1]; return val.length >= min;
};
var hasUpperCaseChar = function hasUpperCaseChar(val) { return (/[A-Z]/.test(val) );
};
var hasLowerCaseChar = function hasLowerCaseChar(val) { return (/[a-z]/.test(val) );
};
var hasNumber = function hasNumber(val) { return (/\d/.test(val) );
};
var stringsMatch = function stringsMatch(str1, str2) { return str1.toUpperCase() === str2.toUpperCase();
};
// Error messages
var showMessage = function showMessage(id, className) { return document.querySelector('#' + id + ' .' + className).classList.remove('is-hidden');
};
var resetErrorMessages = function resetErrorMessages(id) { // Make sure all error messages are hidden (reset) var errorMessages = document.querySelectorAll('#' + id + ' li'); for (var i = 0; i < errorMessages.length; i++) { errorMessages[i].classList.add('is-hidden'); }
};
// Main validation function
var validatePassword = function validatePassword() { var isDirty = false; return function (e) { var val = e.target.value; var errorId = e.target.dataset.errorListId; var confirmId = e.target.dataset.confirmId; resetErrorMessages(errorId); var hasErrors = false; if (!isLongEnough(val)) { showMessage(errorId, 'js-password-length'); hasErrors = true; } if (!hasUpperCaseChar(val)) { showMessage(errorId, 'js-password-upper'); hasErrors = true; } if (!hasLowerCaseChar(val)) { showMessage(errorId, 'js-password-lower'); hasErrors = true; } if (!hasNumber(val)) { showMessage(errorId, 'js-password-number'); hasErrors = true; } if (confirmId) { var confirmInput = document.getElementById(confirmId); if (confirmInput.value && confirmInput.value !== val) { confirmInput.classList.add('is-invalid'); } else { confirmInput.classList.remove('is-invalid'); } } if (hasErrors) { e.target.classList.add('is-invalid'); } };
};
var clearInvalidState = function clearInvalidState(e) { e.target.classList.remove('is-invalid');
};
var matchPasswords = function matchPasswords(e) { var password = document.getElementById(e.target.dataset.matchId).value; if (!stringsMatch(e.target.value, password)) { e.target.classList.add('is-invalid'); };
};
var bindEvents = function bindEvents() { var passwords = document.getElementsByClassName('js-password'); var confirmPasswords = document.getElementsByClassName('js-match-input-values'); for (var i = 0; i < passwords.length; i++) { passwords[i].addEventListener('blur', validatePassword()); passwords[i].addEventListener('focus', clearInvalidState); } for (var i = 0; i < confirmPasswords.length; i++) { confirmPasswords[i].addEventListener('blur', matchPasswords); confirmPasswords[i].addEventListener('focus', clearInvalidState); }
};
bindEvents();
Password validation - Script Codes
Password validation - Script Codes
Home Page Home
Developer Dave
Username DaveOrDead
Uploaded November 25, 2022
Rating 3
Size 3,866 Kb
Views 14,168
Do you need developer help for Password validation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Dave (DaveOrDead) Script Codes
Name
Email validation
Flexbox Grid - equal height
Callbacks
Colour Swatches
React Calculator
A Pen by Dave
Shell CSS lib
Words at War
Inline-block grid
Flexbox grid mark 2
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!