jQuery Input check - disable submit - problem

Question

I wrote a simple value checker for needed inputs, please see the demo here:

http://tinyurl.com/yeqwoju

$('.required').keyup(function(){
 if($(this).val() == '') {
  $(this).addClass('warning');
  $('.meet').addClass('disabled').attr('disabled',true);
 } else {
  $(this).removeClass('warning');
  //if($(this).siblings('.required').val() == '') {
  //this should check if other requiered fields are empty
  //but it fails
   $('.meet').removeClass('disabled').attr('disabled',false);
  //}
 }
});

If you 1. enter a value to both inputs and 2. delete both - and 3. then enter a value to one of them, the submit is enabled (fail) - but one needed input is blank so the submit still has to be disabled.

I tried to check the siblings ".required" for their values but it does not work.

Answer 1

Assuming that you want only want to enable the button if all of the siblings have a value:

if ($('.required[value=]').length > 0)
    $('.meet').removeClass('disabled').attr('disabled',false);

Note that $(this).siblings('.required') won't return any elements because it only returns direct siblings. (The only direct sibling of the input is its label)

Answer 2

oh, i forgot the == '' :

if($(this).siblings('.required').val() == '') ...

but this still does not work

Answer 3

tried your code. not working...

Answer 4

You may want to start out having the submit button disabled if the values are empty and change it when both have something in them. Try:

if($('.meet').val() == ''){
    $('.meet').addClass('disabled').attr('disabled',true);
}

$('.required').keyup(function(){
    if($(this).val() == '') {
        $(this).addClass('warning');
    }else{
        $(this).removeClass('warning');
    }

    if($('.required[value=]').length == 0){
        $('.meet').removeClass('disabled').attr('disabled',false);
    }else{
        $('.meet').addClass('disabled').attr('disabled', true);
    }
});

Answer 5

You should start out with the login button disabled. You also should set the disabled attribute to disabled not to true and false.

Your check

$(this).siblings('.required').val() == ''

doesn't work because there is no sibling .required to the input field you are in. Your HTML looks like this. But the second input isn't a sibling as it has a different parent.

<li>
    <label for="username">Benutzername:</label>
    <input type="text" name="username" id="username" class="text required" value="" maxlength="10" />
</li>
<li>
    <label for="password">Passwort:</label>
    <input type="password" name="password" id="password" class="text required" value="" maxlength="10" />
</li>

Corrected jQuery foo

$('.meet').addClass('disabled').attr('disabled','disabled');
$('.required').keyup(function(){
    if($(this).val() == '') {
        $(this).addClass('warning');
        $('.meet').addClass('disabled').attr('disabled','disabled');
    } else {
        $(this).removeClass('warning');
        if($(this).parent().next().find('input.required').val() != '') {
            $('.meet').removeClass('disabled').attr('disabled','');
        }
    }
});