Find element within div and add text with jQuery

Question

I'm trying to write a small snippet of jQuery that validates my input fields. If they don't validate I want to write an error message to an empty <p> tag, only I can't seem to target it correctly. Can anybody see/explain where im going wrong?

http://jsfiddle.net/xG2KS/19/

$(".nextform").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).find('p.feedback').html('error');
    }
});

<div>
    <li><input type="text" /><br /></li>
    <li><input type="text" /><br /></li>
    <li><input type="text" /><br /></li>
    <li><p class="feedback"></p>
    <input type="submit" value="next" class="next" /></li>
</div>

Your code is not semantically correct, you cannot nest <li> tags within a <div> tag — Dan
– Dan, Commented Jan 18, 2012 at 10:20

liunian · Accepted Answer · 2012-01-18 10:19:06Z

2

$(".next").click(function() {
    var empty = $(this).parent().parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).prev('p.feedback').html('error');
    }
});

I do not find .nextform but just .next, and should use $(this).parent().parent() because the click target is in li

answered Jan 18, 2012 at 10:19

liunian

4402 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ionoy Over a year ago

While this is totally valid answer, I would recommend adding some kind of .container class to parent div. This way your code will not break in case you choose to wrap your submit button in some other tag.

liunian Over a year ago

You are right, my code base on the structure, using class might be better

Peter-Paul van Gemerden · Accepted Answer · 2012-01-18 10:38:01Z

In your sample HTML, there is no element with the class .nextform. Try selecting on "input.next" or, if you want to be more specific, "input[type=submit].next".
<li>'s should always be inside an <ul> or <ol>.
<input>'s should only have type="submit" if they are inside a form and used to submit that form. If they are not, give them type="button".
Use .closest to find the nearest ancestor of a certain type, e.g.: $(this).closest("div").
It's good practice to be as explicit as possible, so use: if (empty.length > 0) { ... }

http://jsfiddle.net/PPvG/xG2KS/38/

$("input.next").click(function() {
    var parent = $(this).closest('div');
    var empty = parent.find("input[type=text]").filter(function() {
        return this.value === "";
    });
    var feedback = parent.find('p.feedback');
    if (empty.length > 0) {
        feedback.text('error');
    } else {
        feedback.text('');        
    }
});

<div>
    <ul>
        <li><input type="text" /><br /></li>
        <li><input type="text" /><br /></li>
        <li><input type="text" /><br /></li>
        <li>
            <p class="feedback"></p>
            <input type="button" value="next" class="next" />
        </li>
    </ul>
</div>

Nicola Peluchetti · Accepted Answer · 2012-01-18 10:06:41Z

0

You should use prev()

$(".nextform").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).prev('p.feedback').html('error');
    }
});

because find() looks for the descendants

Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.

answered Jan 18, 2012 at 10:06

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Comments

Karl Mendes · Accepted Answer · 2012-01-18 10:20:04Z

0

New Fiddle: http://jsfiddle.net/kmendes/xG2KS/32/

This is how the code should look like:

$(".next").click(function() {
    var found = $(this).parents("div").find("li input").filter(function() {
        return this.value === "";
    });
    if(found.length) {
        $(this).parent().find('p.feedback').html('error');
    }
});

answered Jan 18, 2012 at 10:20

Karl Mendes

6494 silver badges9 bronze badges

Comments

Bon Espresso · Accepted Answer · 2012-01-18 10:31:51Z

0

$(".next").click(function() {
    var empty = $(this).parent().find("li input").filter(function() {
        return this.value === "";
    });
    if(empty.length) {
        $(this).parent().find('p.feedback').html('error');
    }
});

answered Jan 18, 2012 at 10:31

Bon Espresso

7033 silver badges5 bronze badges

Collectives™ on Stack Overflow

Find element within div and add text with jQuery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related