JavaScript - 在“for”循环中设置表单输入属性

这是我的第一个现实世界的JavaScript项目。请善待...

我正在创建一个包含必填字段的表单。使用 JavaScript，我将必填字段收集为数组中的对象，每个对象都具有属性"object"（HTML 对象本身，我可以从中获取 object.id 和 object.value）、"描述"（向用户显示）和"错误"（每个输入字段下方出现相应验证错误的 HTML 对象）。

然后我有一个函数（用于 Blur，用于即时反馈）检查字段的值是否为 null，如果是，它会在相应字段下方显示验证错误。

我正在尝试使用贯穿必填字段数组的 FOR 循环为每个输入字段设置 onblur 属性。我有一个 setAttribute 语句，如果我单独为 Array 中的每个对象创建一个单独的语句，它就会完美运行。但是一旦我将其更改为 FOR 循环，ANY 字段的 onblur 事件就会弹出第一个输入字段的验证错误，仅。这一定是新生的错误，但是我已经搜索了上下，并以十种不同的方式重写了这个东西，无法使其与循环一起使用......

我把我的代码放在小提琴中，

这样你就可以看到它——但它实际上在小提琴中不起作用，只能在我的本地开发环境中工作（也许这表明另一个问题？代码如下：

  //create array with constructor to identify all required fields
  var allRequired = [];
  function RequiredField(theID, theDescription) {
    this.object = document.getElementById(theID);
    this.description = theDescription;
    this.error = document.getElementById("error-" + theID);
    allRequired.push(this);
  }
  var fieldFname = new RequiredField("fname", "First Name");
  var fieldLname = new RequiredField("lname", "Last Name");
  var fieldEmail = new RequiredField("email", "Email");
  var fieldPhone = new RequiredField("phone", "Phone");
  var fieldRole = new RequiredField("role", "Desired Role");
  var fieldPortfolio = new RequiredField("portfolio", "Portfolio/Website URL");
  function requireField(theDescription, theValue, theError) {
      if (theValue === "") {
        theError.innerHTML = "<p>" + theDescription + " is required.</p>";
      } else {
        theError.innerHTML = "";
      }
    } //end function
  for (i = 0; i < allRequired.length; i++) {
    allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[i].description, allRequired[i].object.value, allRequired[i].error);");
  }
  /* THIS WORKS IN MY LOCAL DEV ENVIRONMENT...
	allRequired[0].object.setAttribute("onBlur", "requireField(allRequired[0].description, allRequired[0].object.value, allRequired[0].error);");
	allRequired[1].object.setAttribute("onBlur", "requireField(allRequired[1].description, allRequired[1].object.value, allRequired[1].error);");
	allRequired[2].object.setAttribute("onBlur", "requireField(allRequired[2].description, allRequired[2].object.value, allRequired[2].error);");
	allRequired[3].object.setAttribute("onBlur", "requireField(allRequired[3].description, allRequired[3].object.value, allRequired[3].error);");
	allRequired[4].object.setAttribute("onBlur", "requireField(allRequired[4].description, allRequired[4].object.value, allRequired[4].error);");
	allRequired[5].object.setAttribute("onBlur", "requireField(allRequired[5].description, allRequired[5].object.value, allRequired[5].error);");
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="form-careers" id="form-careers" action="form-process.php" enctype="multipart/form-data" onsubmit="return validateForm()" method="post">
  <div class="form_labels">
    <p>
      <label for="fname">First Name:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="text" name="fname" id="fname" required />
    </p>
    <div class="error" id="error-fname"></div>
  </div>
  <div class="form_labels">
    <p>
      <label for="lname">Last Name:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="text" name="lname" id="lname" required />
    </p>
    <div class="error" id="error-lname"></div>
  </div>
  <div class="form_labels">
    <p>
      <label for="email">Email:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="email" name="email" id="email" required />
    </p>
    <div class="error" id="error-email"></div>
  </div>
  <div class="form_labels">
    <p>
      <label for="phone">Phone:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="tel" name="phone" id="phone" placeholder="###-###-####" pattern="'d{3}['-]'d{3}['-]'d{4}" required />
    </p>
    <div class="error" id="error-phone"></div>
  </div>
  <div class="form_labels">
    <p>
      <label for="role">Desired Role:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="text" name="role" id="role" required />
    </p>
    <div class="error" id="error-role"></div>
  </div>
  <div class="form_labels">
    <p>
      <label for="portfolio">Portfolio/Website:</label>
    </p>
  </div>
  <div class="form_inputs">
    <p>
      <input type="url" name="portfolio" id="portfolio" placeholder="http://" pattern="[a-z0-9.-]+'.[a-z]{2,63}$" required />
    </p>
    <div class="error" id="error-portfolio"></div>
  </div>
  <div class="clearboth"></div>
  <input type="hidden" name="formtype" id="formtype" value="careers">
  <div class="form_labels">
    <p>&nbsp;</p>
  </div>
  <div class="form_inputs">
    <a href="#">
      <input type="submit" value="Submit" class="btn-red">
    </a>
  </div>
</form>

如果有人能帮助我指出正确的方向，我将不胜感激。

for (i = 0; i < allRequired.length; i++) {
    allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[i].description, allRequired[i].object.value, allRequired[i].error);");
}

for (i = 0; i < allRequired.length; i++) {
    allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[" +i + "].description, allRequired[" + i + "].object.value, allRequired[" + i + "].error);");
}