Get label for input field

I'm doing a validation with Jquery and need to get the $label from each element with their own label. Now the alert() gives med [object object]. The best thing for me here is to get an alert() with all fields lined up that is not filled out. And not an alert() for each.

Here is a fiddle: http://jsfiddle.net/s7pYX/

How is this accomplished?

HTML:

<div>
<label for="txtName">Name</label>
<input type="text" id="txtName" class="form-control" name="txtName">
</div>

<div>
<label for="txtEmail">E-mail</label>
<input type="text" id="txtEmail" class="form-control" name="txtEmail">
</div>

Jquery:

 $('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']")

 alert($label)    

 }

 });

In the alert() I expect like this "You need to fill out: Name, E-mail"

Try to alert the contents of $label, you can use .text() for this

$('input').each(function(){
    var $element = $(this)

    if ($element.val() == '') {
        var $label = $("label[for='"+this.id+"']")
        alert($label.text())    
    }

});

Demo: Fiddle

Update

var $labels = $("label[for]");
var empties = $('input').filter(function(){
    return $.trim($(this).val()) == ''
}).map(function(){
    return $labels.filter('[for="'+this.id+'"]').text()
}).get().join(', ')

alert(empties)

Demo: Fiddle

Try

$('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']")

 alert("You need to fill :" + $label.text())    

 }

 });

DEMO

Update :

is it possible to arrange all the $label in one alert() and not one alert() each?

Yes

var errorString ="";
var isNeedToFill=false;
$('input').each(function(){
 if ($(this).val() == '') {
isNeedToFill =true;
 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']");
  errorString += $label.text()+" ";
 }
 }); 
 if(isNeedToFill){
 alert("You need to fill :" +errorString);
 }

DEMO

try to alert

alert($label.text())

because you are sending an object to the alert function, if you want to get the content of the selected label you have to get it's html http://jsfiddle.net/s7pYX/2/

 $('input').each(function(){
 if ($(this).val() == '') {

 $element = $(this)

 var $label = $("label[for='"+$element.attr('id')+"']").html();

 alert($label)    

 }

 });

Instead of below line:

var $label = $("label[for='"+$element.attr('id')+"']"

Use the following code:

var $label = $("label[for='"+$element.attr('id')+"']").text();

You are getting only the object you need to use the .html() or .text() to get the text inside the label tag.

Check this DEMO

$('input').each(function () {
    if ($(this).val() == '') {

        $element = $(this);

        var label = $element.closest("div").find("label").text();

        alert(label)

    }

});

This isn't a great example but you could use the prev function from jQuery which will find the previous label before your selected component.

$(document).ready( function() {

   $('input').each(function(){
       alert($(this).prev("label").html())
   });

});

JSFiddle: http://jsfiddle.net/gQnaM/

 var response = ""; 
 $('input').each(function(){
     if ($(this).val() == '') {

     response += ", " + $('label[for="' + this.id + '"]').html();
     }
 }); 

alert(response.replace(", ", "You need to fill out: "));

With JQuery, you can find all the labels linked to the input with $(input).labels();

$('input').each( function() {
    var $labels = $(this).labels();
    $labels.each(function(index, element){
        alert($(element));
    });
});

来源：https://stackoverflow.com/questions/18375457/get-label-for-input-field

标签

jquery

label

each