Layout SVG

JavaScript Altersabfrage

Deine Website enthält Content der nicht für die Augen Minderjähriger gedacht ist? Hier kommt der JavaScript Code-Snippet mit dem du das Alter deiner User überprüfen kannst und unter 18jährigen keinen Zugang gewährst.

Image by Mohammad Rahmani (https://unsplash.com/photos/8qEB0fTe9Vw)

Image by Mohammad Rahmani (https://unsplash.com/photos/8qEB0fTe9Vw)

Bedenke, dass dieses Script nur die Eingabe des Users mit einem bestimmten Zahlenwert vergleicht. Um deine Website wirklich für minderjährige Besucher unzugänglich zu machen, ist dieses Script nicht geeignet.

Wem eine einfache Überprüfung für seine Website reicht, kann gerne weiter lesen.

Zunächst benötigen wir, wer hätte es gedacht, ein Eingabefeld. Im konkreten Anwendungsfall ist der Einsatz eines Overlays oder Ähnliches für die Platzierung des Eingabefelds sicherlich sinnvoll, damit der User die Altersabfrage nicht einfach umgehen kann.

<input type="text" name="userAge" id="userAgeInput" value="">

<button type="button" id="submitAge" onclick="checkAge()">Alter überprüfen</button>

Beispiel: Überprüfung nach Alter

Hierbei handelt es sich um die „einfachste“ Variante das Alter des Users zu überprüfen. In der Variable userAge wird der Value also die Eingabe des Users gespeichert und anschließend an die darauf folgende Funktion übergeben bzw. dort ausgelesen. Die Funktion besteht aus zwei Bedingungen und deren entsprechenden else-Blöcken. In der ersten wird geprüft ob der User eine Eingabe getätigt hat. Wenn dies zutrifft wird die Eingabe mit dem Wert der Volljährigkeit (in diesem Beispiel 18) verglichen. Je nach Wert der Eingabe des Users wird ein entsprechendes alert ausgegeben.

function checkAge() {	

 var userAge = document.getElementById('userAgeInput').value;

    if (userAge !== "") {
      if (userAge > 18 || userAge == 18) {
        alert("Du bist volljährig.");
      } else if (userAge < 18) {
        alert("Du bist noch nicht volljährig."); 
      }
    } else {
      alert("Bitte gib dein Alter an.");
    } 
}

Ergebnis

Bitte gib dein Alter an:

Beispiel: Überprüfung nach Geburtsjahr

In diesem Beispiel erfährst du, wie du die Volljährigkeit deiner Websitebesucher anhand des Geburtsjahrs überprüfen kannst. Es kann wie im obigen Beispiel ein ganz normales Input-Feld verwendet werden. Es macht allerdings mehr Sinn wenn dem User eine "Vorauswahl" mittels Select zur Verfügung gestellt wird.

Wie du das Select dynamisch für Tag, Monat und oder Jahr befüllen kannst, erfährst du hier.

<select id="birthYear" name="birthYear" value="">
</select>
  
<button type="button" id="submitAge" onclick="checkAge()">Alter überprüfen</button>
function checkAge() {	

var userAge = new Date().getFullYear() - document.getElementById("birthYear").value;

  if ( userAge > 18 || userAge == 18 ) {
    alert( "Du bist volljährig." );   
  } else {
    alert( "Du bist noch nicht volljährig." );  
  }
}

Ergebnis

Beispiel: Überprüfung nach Geburtsdatum

Bei diesem Beispiel wird das vollständige Geburtsdatum des Users überprüft. Das Prinzip ist ein einfacher Größer-Kleiner-Vergleich der sich jeweils für das Geburtsjahr, dem Geburtsmonat und dem Geburtstag wiederholt.

Als Beispiel, das Geburtsjahr: Ist das Alter in Jahren birthMinusCurrentYear des Users höher als die Volljährigkeit ist die Lage eindeutig. Der User ist volljährig. Falls sein Alter in Jahren genau 18 entspricht, steigen wir in die nächste Bedingung ein: dem Vergleich zwischen dem Geburtsmonat des Users und dem aktuellem Monat.
Liegt der Geburtsmonat unterhalb des momentanen Monats ist der User noch nicht volljährig. Sind der aktuelle Monat und der Geburtsmonat genau gleich, kommt es erneut zur nächsten Bedingung, dem Vergleich zwischen dem Geburtstag des Users und des heutigen Tages.
Auch hier kommt die Logik wie beim Jahr und dem Monat ins Spiel. Liegt der Geburtstag über dem aktuellen Tag ist der User volljährig. Wenn der heutige Tag dem Geburstag des Users entspricht, ist der User genau zum heute volljährig geworden.

function checkAge() {	

  var usersBirthDay = document.getElementById("day").value;
  var usersBirthMonth = document.getElementById("month").value;
  var usersBirthYear = document.getElementById("year").value;
  var currentDay = new Date().getDate();
  var currentMonth = new Date().getMonth() + 1; 
  var currentYear = new Date().getFullYear();

  var birthMinusCurrentYear = currentYear - usersBirthYear;


  if (birthMinusCurrentYear > 18) {
    alert("Du bist volljährig");
  } else if (birthMinusCurrentYear === 18) {

    if (currentMonth < usersBirthMonth) {
      alert("Du bist volljährig");
    } else if (currentMonth == usersBirthMonth) {

      if (currentDay > usersBirthDay) {
        alert("Du bist volljährig");
      } else if (currentDay == usersBirthDay) {
        alert("Happy Birthday. Du bist volljährig.");
      } else {
        alert("Du bist nicht volljährig");
      };

    } else {
      alert("Du bist nicht volljährig");
    };
  
  } else {
    alert("Du bist nicht volljährig");
  };
   
}

Ergebnis

Bitte gib dein Geburtsdatum an:

Kommentar verfassen

Deine E-Mail Adresse wird nicht veröffentlicht.
Erforderliche Felder sind mit * gekennzeichnet