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?

/

$(".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>

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

• javascript
• jquery

Share Improve this question Follow edited Jan 18, 2012 at 10:18 Peter-Paul van Gemerden 7,0093232 silver badges3737 bronze badges asked Jan 18, 2012 at 10:04 LiamLiam 9,8634040 gold badges114114 silver badges214214 bronze badges 1

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

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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

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

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.

New Fiddle: http://jsfiddle/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');
    }
});

$(".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');
    }
});