<!DOCTYPE html>
<html>
<head>
<title>CPR-nummer</title>
<style>
body {
text-align: center;
font-family: sans-serif;
}
label {
font-size: 1.4em;
font-weight: bold;
}
#input {
font-family: monospace;
width: 11ch;
font-size: 1.4em;
padding: 4px 6px;
margin-top: 4px;
}
#result {
font-size: 1.2em;
}
#result.valid {
color: green;
}
#result.invalid {
color: red;
}
</style>
<script>
window.onload = function() {
var input = document.getElementById("input");
var result = document.getElementById("result");
var description = document.getElementById("description");
input.onkeyup = function() {
// Reset
result.className = "";
result.innerText = "";
description.innerText = "";
// Validate
if (input.value.length != 11 || !input.reportValidity()) return;
// Calculate date
var day = parseInt(input.value.slice(0, 2));
var month = parseInt(input.value.slice(2, 4));
var year = parseInt(input.value.slice(4, 6));
// Calculate full year
var seventhDigit = parseInt(input.value.charAt(7));
if (seventhDigit < 4) year += 1900;
else if (seventhDigit === 4 || seventhDigit === 9) year += (year > 36 ? 1900 : 2000);
else if (seventhDigit < 8) year += (year > 57 ? 1900 : 2000);
// Get strings for result
var date = new Date(year, month - 1, day);
var dateString = date.toLocaleDateString("da-DK", {
year: "numeric",
month: "long",
day: "numeric",
});
var gender = parseInt(input.value.charAt(10)) % 2 === 0 ? "Kvinde" : "Mand";
// Calculate checksum
var factors = [4, 3, 2, 7, 6, 5, 4, 3, 2, 1];
var sum = input.value
.replace("-", "")
.split("")
.map(function(digit, index) {
return parseInt(digit) * factors[index];
})
.reduce(function(acc, val) {
return acc + val;
}, 0);
if (sum % 11 === 0) {
result.className = "valid";
result.innerText = "Gyldigt CPR-nummer";
description.innerHTML = "<b>Fødselsdato:</b> " + dateString + "<br><b>Køn:</b> " + gender;
} else {
result.className = "invalid";
result.innerText = "Ugyldigt CPR-nummer";
}
}
}
</script>
</head>
<body>
<label for="input">Indtast CPR-nummer:</label>
<br>
<input id="input" type="text" placeholder="XXXXXX-XXXX" maxlength="11" pattern="\d{6}-\d{4}" autofocus>
<p id="result"></p>
<p id="description"></p>
</body>
</html>