Why does this simple E-Mail validation not execute?

Question

I wrote this simple form validation script for the school, but the function which checks the e-mail, called absender(), doesn't work, and I don't get why. The other two functions, which are validating the names do work. I literally trying for days and hours now, any help is much appreciated.

window.onload = function() {
  'use:strict';

  var nachName = document.getElementById('Nachname');
  nachName.addEventListener('blur', nName);

  var vorName = document.getElementById('Vorname');
  vorName.addEventListener('blur', vName);

  var absender = document.getElementById('Absender');
  absender.addEventListener('blur', absender);

  function nName() {
    var re = /^[A-Za-z]+$/;

    if (re.test(document.Formular.Nachname.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }

  function vName() {
    var re = /^[A-Za-z]+$/;

    if (re.test(document.Formular.Vorname.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }

  function absender() {
    var at = /\S+@\S+\.\S+/;

    if (at.test(document.Formular.Absender.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }
}

<form name="Formular">
  <p id="formuText"></p>
  <fieldset name="fieldset">
    <legend>Persönliche Daten</legend>
    <p id="formText"></p>
    <label for="Nachname">Nachname</label>
    <input type="text" id="Nachname" placeholder="Mustermann" name="Nachname">
    <label for="Vorname">Vorname</label>
    <input type="text" id="Vorname" placeholder="Max" name="Vorname">
    <label for="absender">E-Mail:</label>
    <input type="text" id="Absender" name="Absender" placeholder="MaxMuster@Mann.de">
  </fieldset>
</form>

Answer 1

• You call the var the same as the function and wipe it.

  var abs = document.getElementById('Absender');
abs.addEventListener('blur', absender);
  fixed that

• Also your label for needs to point at the Absender

• Also no need to access the field by id inside the event handler

window.onload = function() {
  'use:strict';

  var nachName = document.getElementById('Nachname');
  nachName.addEventListener('blur', nName);

  var vorName = document.getElementById('Vorname');
  vorName.addEventListener('blur', vName);

  var abs = document.getElementById('Absender');
  abs.addEventListener('blur', absender);

  function nName() {
    var re = /^[A-Za-z]+$/;
    if (re.test(this.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }

  function vName() {
    var re = /^[A-Za-z]+$/;

    if (re.test(this.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }

  function absender() {
    var at = /\S+@\S+\.\S+/;

    if (at.test(this.value)) {
      document.getElementById("formuText").innerHTML = "";
    } else {
      document.getElementById("formuText").innerHTML = "Fehlerhafte Eingabe!";
    }
  }
}

<form name="Formular">
  <p id="formuText"></p>
  <fieldset name="fieldset">
    <legend>Persönliche Daten</legend>
    <p id="formText"></p>
    <label for="Nachname">Nachname</label>
    <input type="text" id="Nachname" placeholder="Mustermann" name="Nachname">
    <label for="Vorname">Vorname</label>
    <input type="text" id="Vorname" placeholder="Max" name="Vorname">
    <label for="Absender">E-Mail:</label>
    <input type="text" id="Absender" name="Absender" placeholder="MaxMuster@Mann.de">
  </fieldset>
</form>

Answer 2

Your element variable and validation function have the same name.

...
var absender = document.getElementById('Absender'); // <-- this variable
absender.addEventListener('blur', absender);
...
function absender() {                             // <-- has the same name of this function
  var at = /\S+@\S+\.\S+/;
...

They can't have the same name. Roughly, they "occupy the same namespace".

To fix, rename either the function or the element:

var absenderElement = document.getElementById('Absender'); // notice the variable rename
absenderElement.addEventListener('blur', absender);

In the example above, the variable was renamed from absender to absenderElement, so the function can keep the name absender().