Selecting previous label element JQUERY

Question

So I have a form;

<label for="name">Job Date</label><br /><input id="name" class="required" title="Enter a name!" name="name" type="text" />

and some Jquery to cycle through each input with class "required" and see if it is empty/blank and if so give this input a red border color, and also the label assosciated with it a red color;

function checkreview()
    { 
     var errors = "";
     $(".required").each(function (i) 
     {
      if($(this).val() == "")
      {
       errors += $(this).attr('title')+'<br />';
       $(this).css('border-color','#FF0000');
       //need to select previous label and set color to red    
      }

     });


}

So I need a selector that will select the previous label and allow me to give it .css('color','FF0000').

Any ideas how to select the previous label in JQUERY?

Answer 1

did you try this:

$("input").prev("label").css('color','FF0000')

Answer 2

$(this).prev().prev().css('color','FF0000');

But I would use a css class instead of applying style with jQuery:

<style>
div.form label {display:block;}
label.error {color:FF0000}
input.error {border-color:FF0000}
</style>

<div class="form">
<label for="name">Job Date</label>
<input id="name" class="required" title="Enter a name!" name="name" type="text" />
</div>

The the validation would change to:

function checkreview()
{   
        var errors = "";
        $(".required").each(function (i) 
        {
                if($(this).val() == "")
                {
                        errors += $(this).attr('title')+'<br />';
                        $(this).addClass("error");
                        $(this).prev().addClass("error");    
                }

        });
}

Answer 3

Since there is a <br /> element before the input element you can't use prev().

What about

$("input").prevAll("label").css('color','FF0000');

or you can select the label element with the attribute for

$("input").prevAll("label[for=" + $("input").attr ( 'id' ) + "]").css('color','FF0000');

prevAll: Find all sibling elements in front of the current element.

Answer 4

How about selecting the corresponding label using the id of the input field. So you'll find the label wherever it is.

Replace your comment with this:

$('label[for="'+ $(this).attr('id') +'"]').css('color','#FF0000');

Answer 5

Try this:

$('label[for='+ $(this).attr('id') +']').css('border','#ff0000 1px solid');

or add the label border style to the CSS because you can't see the border color unless you have the border type set... the label[for=ID] does work as previously answered.