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>

Answer 1

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