Question

I am creating a form validation in jQuery, but I have some problems;

First I iterate over all the to-be-validated elements and push them into an array (I have tried all of the following):

1. errorfields.push($("#name"));
2. errorfields.push(document.getElementById("name"));
3. errorfields.push("name");

Then, at the end I iterate over these items and want to add an error message.

for(var i = 0; i < errorfields.length; i++){
  1. var parent = errorfields[i];
  2. var parent = $(errorfields[i]);
  3. var parent = $("#" + errorfields[i]);
}

And all this returns is:

[<input>, context: #document, selector: "#name"]

If i try to make a jQuery object of the {input}, it returns exactly the same.

Even if i put a line like:

console.log($("#name"));

It will return this array with context and selector. What can be the problem?

I am unable to execute jquery functions on this object, by the way. Which is the point, seeing that i want to add a 2px red border and a $(parent).after(“error message”);

Answer 1

I think this should work for you.

errorfields.push( $("#name")[0] );
//Get the html element rather than the jQuery element (an object).

Then inside your for loop you should have something like this:

var parent = $( errorfields[i] );
//This will get you the jQuery element again.

Here is a quick example using divs to show this.