CODEWITHSUNDEEP
jquery
danyo
danyo

Reputation: 5846

jquery on input blur show / hide class

I am currently building an html form and using jquery to validate.

Each input field is set up like this:

<div class="controls">
    <input type="text" class="input-xlarge" name="name" id="name">
    <div class="info">&nbsp;</div>
    <div class="valid" style="display:none;">&nbsp;</div>
</div>

Here is my jquery so far:

$('.controls input').blur(function() {                   
    if( !$(this).val() ) {                    
        $(this).css('border-color','red');
        $(this).find('.info').css('display','none');
        $(this).find('.error').css('display','inline-block');

The idea is when the user view the form, the info div shows. If they proceed with the form tabbing through the inputs without enetering any information, the error class will show and remove the info class.

Any ideas on where im going wrong?

Cheers, Dan

Upvotes: 1

Views: 263

Answers (2)

Lupus
Lupus

Reputation: 1518

Your selector is only gets the input fields.

In your callback block of your code $(this) referenced to input tag.

try this:

     $(this).css('border-color','red');

     $(this).parents('.controls').find('.info').css('display','none');
     $(this).parents('.controls').find('.error').css('display','inline-block');

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

Try this, you need to use siblings method here:

$('.controls input').blur(function () {
    if (!$(this).val()) {
        $(this).css('border-color', 'red');
        $(this).siblings('.info').css('display', 'none');
        $(this).siblings('.error').css('display', 'inline-block');
    }
});

Upvotes: 2

Related Questions