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

Question

这是我第一个真实世界的JavaScript项目。请亲切...

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

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

我正在尝试使用FOR循环为每个输入字段设置onblur属性，FOR循环遍历所需字段的数组。我有一个完美的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... 
 
\t allRequired[0].object.setAttribute("onBlur", "requireField(allRequired[0].description, allRequired[0].object.value, allRequired[0].error);"); 
 
\t allRequired[1].object.setAttribute("onBlur", "requireField(allRequired[1].description, allRequired[1].object.value, allRequired[1].error);"); 
 
\t allRequired[2].object.setAttribute("onBlur", "requireField(allRequired[2].description, allRequired[2].object.value, allRequired[2].error);"); 
 
\t allRequired[3].object.setAttribute("onBlur", "requireField(allRequired[3].description, allRequired[3].object.value, allRequired[3].error);"); 
 
\t allRequired[4].object.setAttribute("onBlur", "requireField(allRequired[4].description, allRequired[4].object.value, allRequired[4].error);"); 
 
\t 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

代码

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值。

那么 - 这是什么 - i？没人知道。

正确的代码是：

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

看到了吗？每次迭代我都会得到真实的值i。

Answer 2

由于u_mulder表示concat问题。 至于代码，我建议查找工厂功能。这是更自然的JavaScript然后构造函数。