Проверка ввода jQuery - отключить отправку - проблема

Question

Я написал простую проверку значений для необходимых входных данных, см. Демонстрацию здесь:

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

Если вы 1. вводите значение для обоих входов и 2. удаляете оба - и 3. затем вводите значение для одного из них, отправка разрешается (сбой) - но один необходимый ввод пуст, поэтому отправка все еще имеет быть отключенным.

Я пытался проверить братьев и сестер ".required" на их значения, но это не работает.

Answer 1

Вы можете начать с отключения кнопки отправки, если значения пусты, и изменить ее, если в обоих есть что-то. Попробуйте:

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 2

Вы должны начать с отключенной кнопки входа. Вы также должны установить для атрибута disabled значение disabled, а не true и false.

Ваш чек

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

не работает, потому что нет родного элемента .required в поле ввода, в котором вы находитесь. Ваш HTML выглядит следующим образом. Но второй вход не является родным братом, так как у него другой родитель.

<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>

Исправлено 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','');
        }
    }
});

Answer 3

Предполагая, что вы хотите включить кнопку, только если все братьев и сестер имеют значение:

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

Обратите внимание, что $(this).siblings('.required') не вернет никаких элементов, потому что он возвращает только direct siblings. (Единственный прямой брат input - это label)