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

Question

This is my first real-world JavaScript project. Please be kind...

I'm creating a form with required fields. With JavaScript, I am collecting the required fields as objects in an Array, each object having the properties "object" (the HTML objects themselves, from which I can get object.id and object.value) "description" (to display to users) and "error" (the HTML objects beneath each input field where corresponding validation errors appear).

Then I have a function (to be used onBlur, for instant feedback) that checks to see if the value of the field is null, and if so, it displays the validation error beneath the corresponding field.

I'm trying to set the onblur attribute for each input field using a FOR loop that runs through the array of required fields. I have a setAttribute statement that works perfectly if I create an individual statement for each object in the Array, individually. But as soon as I change it to a FOR loop, the onblur event for ANY field pops up the validation error for the FIRST input field, only. This has got to be a freshman mistake, but I've searched high and low and rewritten this thing ten different ways and can't make it work with a loop...

I put my code in a Fiddle so you can see it -- but it doesn't actually work in the fiddle, only in my local dev environment (maybe that indicates another problem?). Here's the code:

  //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.-]+\\.[az]{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> 

If someone would help point me in the right direction I would really appreciate it.

Answer 1

Code

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

sets onblur event with value like requireField(allRequired[i].description .

So - what is it - i ? No one knows.

Proper code is:

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

See? I get real i value for each iteration.

Answer 2

As u_mulder said concat problem. As for code I suggest to look up factory functions. It's more natural javascript then constructor.