title: Connect inputs with spans
body: <p>I've made a small input validation. The problem now is, behind every input field it says: "email can't be empty". The intention is that he picks the names of the input fields and puts these names before the messages. So you get: "userName can't be empty, password can't be empty, passwordCheck can't be empty". In this way, I want the <code>input fields</code> and <code>spans</code> to be connected to each other. Is this possible? If so, how? 
  Thank you in advance.</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Document&lt;/title&gt;
      &lt;script src="span.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          window.onload = function() {
              //validator.className = "ValidateField";
          }
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;form&gt;
          &lt;div&gt;
              Name: &lt;input type="text" name="userName" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20"&gt;
              &lt;span class="SpanField" name="spanUser" style="color:red"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              Password: &lt;input type="password" name="password" class="ValidateField" data-validate="EmptyAllowed|min-5|max-20|symbols-not-allowed"&gt;
              &lt;span name="spanPassword" class="SpanField" style="color:red"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              Password again: &lt;input type="password" class="ValidateField" name="passwordCheck" data-validate="EmptyNotAllowed|min-5|max-20"&gt;
              &lt;span name="spanPasswordCheck" class="SpanField" style="color:red"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              E-mail: &lt;input type="email" name="email" class="ValidateField" data-validate="EmptyNotAllowed|min-5|max-100"&gt;
              &lt;span name="spanEmail" class="SpanField" style="color:red"&gt;&lt;/span&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;input type="button" value="registreren" onclick="validator.validateNow()"&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>var validator = (function () {
          var my = {};
          var checkList = {};
          var minList = {};
          var maxList = {};
          var validationFields;
  
  
          function validateField(field) {
  
              function showText(error) {
                  var spans = document.getElementsByClassName("SpanField");
  
                  for (s = 0; s &lt; spans.length; s++) {
                      spans[s];
                  }
  
                  var say = function () {
                      spans[0].innerHTML = (field.name + error);
                      spans[1].innerHTML = (field.name + error);
                      spans[2].innerHTML = (field.name + error);
                      spans[3].innerHTML = (field.name + error);
                  }
                  say();
              }
              var checks = field.dataset.validate;
  
              checkList = checks.split('|');
  
              var min = checkList[1];
              minList = min.split('-');
  
              var max = checkList[2];
              maxList = max.split('-');
  
              if (EmptyNotAllowed(field.value)) {
                  showText(" can't be empty");
  
              } else {
                  alert(field.name + "OK!");
              }
  
              if (minLength(field.value)) {
                  showText("must be longer");
              }
  
              if (maxLength(field.value)) {
                  showText("must be shorter");
              }
          }
  
  
  
          function EmptyNotAllowed(value) {
              if (value == '') {
                  return true;
              } else {
                  return false;
              }
          }
  
          function SymbolsNotAllowed() {
              alert("binnenkort beschikbaar");
              return true;
          }
  
  
          function minLength(value) {
              if (value.length &gt; 0 &amp;&amp; value.length &lt; minList[1]) {
                  return true;
              } else {
                  return false;
              }
          }
  
          function maxLength(value) {
              if (value.length &gt; maxList[1]) {
                  return true;
              } else {
                  return false;
              }
          }
  
          my.className = "ValidateField";
  
          my.validateNow = function () {
  
              validationFields = document.getElementsByClassName(my.className);
  
              for (f = 0; f &lt; validationFields.length; f++) {
                  validateField(validationFields[f]);
              }
  
          };
  
          return my;
      }());
  </code></pre>