96 lines
4.5 KiB
JavaScript
96 lines
4.5 KiB
JavaScript
var isMatch = false;
|
|
var isValid = false;
|
|
var hasUppercase = false;
|
|
|
|
function validatePasswords() {
|
|
var checkContainer = document.getElementById('checkContainer')
|
|
var password = document.getElementById('password').value;
|
|
var confirmPassword = document.getElementById('confirmPassword').value;
|
|
var matchGoodPath = document.getElementById('matchGoodPath');
|
|
var matchBadPath = document.getElementById('matchBadPath');
|
|
var lengthGoodPath = document.getElementById('lengthGoodPath');
|
|
var lengthBadPath = document.getElementById('lengthBadPath');
|
|
var uppercaseGoodPath = document.getElementById('uppercaseGoodPath');
|
|
var uppercaseBadPath = document.getElementById('uppercaseBadPath');
|
|
var matchSvgContainer = document.getElementById('matchSvgContainer');
|
|
var lengthSvgContainer = document.getElementById('lengthSvgContainer');
|
|
var uppercaseSvgContainer = document.getElementById('uppercaseSvgContainer');
|
|
var matchStatusText = document.getElementById('matchStatusText');
|
|
var lengthStatusText = document.getElementById('lengthStatusText');
|
|
var uppercaseStatusText = document.getElementById('uppercaseStatusText');
|
|
console.log("jalan")
|
|
if (password.length > 0) {
|
|
checkContainer.classList.remove("hidden")
|
|
} else {
|
|
checkContainer.classList.add("hidden")
|
|
}
|
|
if (password === confirmPassword && password.length > 0 && confirmPassword.length > 0 && password.length === confirmPassword.length) {
|
|
matchSvgContainer.classList.remove('bg-red-200');
|
|
matchSvgContainer.classList.add('bg-green-200');
|
|
matchStatusText.classList.remove('text-red-700');
|
|
matchStatusText.classList.add('text-green-700');
|
|
matchGoodPath.style.display = 'inline';
|
|
matchBadPath.style.display = 'none';
|
|
matchStatusText.textContent = "Passwords match";
|
|
isMatch = true;
|
|
} else {
|
|
matchSvgContainer.classList.remove('bg-green-200');
|
|
matchSvgContainer.classList.add('bg-red-200');
|
|
matchStatusText.classList.remove('text-green-700');
|
|
matchStatusText.classList.add('text-red-700');
|
|
matchGoodPath.style.display = 'none';
|
|
matchBadPath.style.display = 'inline';
|
|
matchStatusText.textContent = "Passwords do not match";
|
|
isMatch = false;
|
|
}
|
|
|
|
if (password.length >= 8) {
|
|
lengthSvgContainer.classList.remove('bg-red-200');
|
|
lengthSvgContainer.classList.add('bg-green-200');
|
|
lengthStatusText.classList.remove('text-red-700');
|
|
lengthStatusText.classList.add('text-green-700');
|
|
lengthGoodPath.style.display = 'inline';
|
|
lengthBadPath.style.display = 'none';
|
|
lengthStatusText.textContent = "Password length meets requirement";
|
|
isValid = true;
|
|
} else {
|
|
lengthSvgContainer.classList.remove('bg-green-200');
|
|
lengthSvgContainer.classList.add('bg-red-200');
|
|
lengthStatusText.classList.remove('text-green-700');
|
|
lengthStatusText.classList.add('text-red-700');
|
|
lengthGoodPath.style.display = 'none';
|
|
lengthBadPath.style.display = 'inline';
|
|
lengthStatusText.textContent = "Password length must be at least 8 characters";
|
|
isValid = false;
|
|
}
|
|
|
|
if (/[A-Z]/.test(password)) {
|
|
uppercaseSvgContainer.classList.remove('bg-red-200');
|
|
uppercaseSvgContainer.classList.add('bg-green-200');
|
|
uppercaseStatusText.classList.remove('text-red-700');
|
|
uppercaseStatusText.classList.add('text-green-700');
|
|
uppercaseGoodPath.style.display = 'inline';
|
|
uppercaseBadPath.style.display = 'none';
|
|
uppercaseStatusText.textContent = "Password contains an uppercase letter";
|
|
hasUppercase = true;
|
|
} else {
|
|
uppercaseSvgContainer.classList.remove('bg-green-200');
|
|
uppercaseSvgContainer.classList.add('bg-red-200');
|
|
uppercaseStatusText.classList.remove('text-green-700');
|
|
uppercaseStatusText.classList.add('text-red-700');
|
|
uppercaseGoodPath.style.display = 'none';
|
|
uppercaseBadPath.style.display = 'inline';
|
|
uppercaseStatusText.textContent = "Password must contain at least one uppercase letter";
|
|
hasUppercase = false;
|
|
}
|
|
|
|
if (isValid && isMatch && hasUppercase) {
|
|
document.getElementById("submit").disabled = false;
|
|
} else {
|
|
document.getElementById("submit").disabled = true;
|
|
}
|
|
}
|
|
|
|
document.getElementById('password').addEventListener('input', validatePasswords);
|
|
document.getElementById('confirmPassword').addEventListener('input', validatePasswords);
|