按需要的属性验证输入元素，并获取每个输入的标签文本

Question

I have some HTML code inside a form and I need to check whether fields with required="required" attribute are empty or not. Pretty much HTML code looks like this:

<div class="p_name">
    <label class="required" for="product_name">Name</label>
    <input type="text" maxlength="50" required="required" name="product[name]" id="product_name">
</div>

I'm building this code:

$('input[required="required"]').each(function() {
    if ($(this).val().length === 0) {
        // Here I should get the text of the label element for 
        // each input and write in the alert but don't know how
        alert();
    }
});

Form elements are wrapped by some section element with id for example #product-create-step-3 so based on what section elements are I should check only fields within the active section, can any give me some help on this code since I don't get how to get the label text?

Answer 1

If the HTML structure for all your fields is the same as you have posted, you can use, .prev() :

$('input[required="required"]').each(function() {
    if ($(this).val().length === 0) {
        alert($(this).prev('label').text() + ' is required...');
    }
});

Answer 2

jsFiddle Demo

$('input[required="required"]').each(function() {
    if ($(this).val().length === 0) {
        var lbl = $(this).siblings('label');
        //or var lbl = $(this).prev('label');
        alert(lbl.text());
    }
});

Answer 3

you can use the .prev() selector along with .text() to extract the text because the label element is the previous sibling of the input element in question

$('input[required="required"]').each(function() {
    if ($(this).val().length === 0) {
        // Here I should get the text of the label element for 
        // each input and write in the alert but don't know how
        alert($(this).prev().text() + ' cannot be blank');
    }
});