CODEWITHSUNDEEP
jqueryinput
Henry
Henry

Reputation: 1

jQuery Input check - disable submit - problem

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

http://wip.redaxscript.com/login

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

Upvotes: 0

Views: 5037

Answers (3)

jitter
jitter

Reputation: 54605

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

Upvotes: 0

munch
munch

Reputation: 6321

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);
    }
});

Upvotes: 1

SLaks
SLaks

Reputation: 887415

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)

Upvotes: 0

Related Questions