Question

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

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

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

我正在尝试使用运行在必需字段数组中的FOR循环为每个输入字段设置onblur属性。我有一个setAttribute语句，如果我单独为Array中的每个对象创建一个单独的语句，它就能很好地工作。但是只要我将其更改为FOR循环，ANY字段的onblur事件就会弹出FIRST输入字段的验证错误。这必须是一个新生的错误，但我已经搜索了高低，并用十种不同的方式重写了这个东西，并且不能使它与循环一起工作......

我将我的代码放在Fiddle中，以便您可以看到它 - 但它实际上并不适用于小提琴，仅在我的本地开发环境中（可能这表示另一个问题？）。这是代码：

  //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>

如果有人帮我指出正确的方向，我会非常感激。

Answer 1

代码

bon = bon + String.Format("{0,-2} X {1,-10}  {2,5}", 
                          hoeveelheid[i], frieten[i], hulp.ToString("C", nfi));

设置for (i = 0; i < allRequired.length; i++) { allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[i].description, allRequired[i].object.value, allRequired[i].error);"); }事件，其值为onblur。

那么 - 它是什么 - requireField(allRequired[i].description？没有人知道。

正确的代码是：

请参阅？我为每次迭代得到了真正的for (i = 0; i < allRequired.length; i++) { allRequired[i].object.setAttribute("onBlur", "requireField(allRequired[" +i + "].description, allRequired[" + i + "].object.value, allRequired[" + i + "].error);"); }值。

Answer 2

因为u_mulder说concat问题。至于代码我建议查找工厂功能。它是更自然的javascript然后构造函数。

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

2 个答案: