javascript - 通过所需属性验证输入元素并获取每个输入的标签文本

Question

我在表单中有一些 HTML 代码，我需要检查具有required="required"属性的字段是否为空。几乎所有的 HTML 代码如下所示：

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

我正在构建这段代码：

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

表单元素由某些部分元素包裹，id例如#product-create-step-3，基于哪些部分元素，我应该只检查活动部分中的字段，由于我不知道如何获取标签文本，任何人都可以给我一些关于此代码的帮助吗？

Answer 1

如果您所有字段的 HTML 结构与您发布的相同，您可以使用，.prev()：

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

Answer 2

jsFiddle 演示

$('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

您可以使用.prev()选择器和.text()来提取文本，因为该label元素是相关输入元素的上一个兄弟

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