geordee/emirates-id.html

## emirates-id.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Validate Emirates ID</title>
  <link rel="stylesheet" href="https://unpkg.com/mvp.css">
  <style>
    section {
      display: flex;
      flex-wrap: wrap;
      justify-content: var(--justify-important);
    }
    .mark-success {
      background-color: #7abc31;
      text-align: center;
    }
    .mark-failure {
      background-color: #eb4d4f;
      text-align: center;
    }
  </style>
</head>
<body>
  <main>
    <section>
      <header>
        <h2>Validate Emirates ID</h2>
        <p>Validate format, reasonable data quality, and checkdigit.</p>
      </header>
      <form onSubmit="return false;">
        <label for="emirates-id">Emirates ID</label><br />
        <input id="emirates-id" name="emirates-id" placeholder="784-XXXX-XXXXXXX-X" onChange="validateEID()" />
        <button onClick="validateEID()">Check</button>
        <p id="message">&nbsp;</p>
      </form>
    </section>
  </main>
</body>
<script type="text/javascript">
  function validateEID() {
    var element = document.getElementById("emirates-id");
    var message = document.getElementById("message");
    message.className = "";

    // regex for emirates id with birth dates between 1900 and 2099
    var re = new RegExp(/784[-]*\d{4}[-]*\d{7}[-]*\d/);

    var eid = element.value;
    if (!re.test(eid)) {
      console.log("Emirates ID format is incorrect.");

      // set error message
      message.classList.add("mark-failure")
      message.textContent = "Emirates ID format is incorrect.";

      return false;
    }

    // luhn algorithm for checkdigit
    var s = 0,
        x = true;
    var v = eid.replace(/\D/g, "");
    var len = v.length;
    var checkdigit = v.charAt(len-1);

    for (var n = len-2; n >= 0; n--) {
      var c = v.charAt(n),
          i = parseInt(c, 10);

      if (x && (i *= 2) > 9) i -= 9;

      s += i;
      x = !x;
    }
    var checksum = (s * 9) % 10;

    // validate checkdigit
    if (checksum != checkdigit) {
      console.log("Emirates ID check digit is incorrect.");

      // set error message
      message.classList.add("mark-failure")
      message.textContent = "Emirates ID check digit is incorrect.";

      return false;
    }

    console.log("Emirates ID is valid.");

    // set error message
    message.classList.add("mark-success")
    message.textContent = "Emirates ID is valid.";

    return true;
  }
</script>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Validate Emirates ID</title>
	<link rel="stylesheet" href="https://unpkg.com/mvp.css">
	<style>
	section {
	display: flex;
	flex-wrap: wrap;
	justify-content: var(--justify-important);
	}
	.mark-success {
	background-color: #7abc31;
	text-align: center;
	}
	.mark-failure {
	background-color: #eb4d4f;
	text-align: center;
	}
	</style>
	</head>
	<body>
	<main>
	<section>
	<header>
	<h2>Validate Emirates ID</h2>
	<p>Validate format, reasonable data quality, and checkdigit.</p>
	</header>
	<form onSubmit="return false;">
	<label for="emirates-id">Emirates ID</label><br />
	<input id="emirates-id" name="emirates-id" placeholder="784-XXXX-XXXXXXX-X" onChange="validateEID()" />
	<button onClick="validateEID()">Check</button>
	<p id="message"> </p>
	</form>
	</section>
	</main>
	</body>
	<script type="text/javascript">
	function validateEID() {
	var element = document.getElementById("emirates-id");
	var message = document.getElementById("message");
	message.className = "";

	// regex for emirates id with birth dates between 1900 and 2099
	var re = new RegExp(/784[-]\d{4}[-]\d{7}[-]*\d/);

	var eid = element.value;
	if (!re.test(eid)) {
	console.log("Emirates ID format is incorrect.");

	// set error message
	message.classList.add("mark-failure")
	message.textContent = "Emirates ID format is incorrect.";

	return false;
	}

	// luhn algorithm for checkdigit
	var s = 0,
	x = true;
	var v = eid.replace(/\D/g, "");
	var len = v.length;
	var checkdigit = v.charAt(len-1);

	for (var n = len-2; n >= 0; n--) {
	var c = v.charAt(n),
	i = parseInt(c, 10);

	if (x && (i *= 2) > 9) i -= 9;

	s += i;
	x = !x;
	}
	var checksum = (s * 9) % 10;

	// validate checkdigit
	if (checksum != checkdigit) {
	console.log("Emirates ID check digit is incorrect.");

	// set error message
	message.classList.add("mark-failure")
	message.textContent = "Emirates ID check digit is incorrect.";

	return false;
	}

	console.log("Emirates ID is valid.");

	// set error message
	message.classList.add("mark-success")
	message.textContent = "Emirates ID is valid.";

	return true;
	}
	</script>
	</html>