проверка каждого требуемого ввода на наличие пустого значения с помощью jQuery

Я проверяю все обязательные поля в форме. Я пробовал это, но это работает только для первого ввода. Как я могу заставить его работать для каждого входа?

if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}

EDIT: для большего контекста, вот еще одна функция, которую я имел ниже, чтобы применять всякий раз, когда они меняются и HTML-код.

$('[required]').change(function() {
if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
    }else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}
});

HTML

У меня есть куча таких входов:

<input type="text" id="title" name="title" value="" required>
<input type="text" id="size" name="size" value="" required>
<input type="text" id="length" name="length" value="" required>

кнопки:

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

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

Кстати, у меня нет тега формы вокруг них, потому что это для мобильных устройств, и я не думаю, что это действительно необходимо, если это имеет значение.

Спасибо еще раз!


forms jquery required-field
person claras    schedule 07.12.2011    source источник
comment
можешь вставить html код? это помогло бы   -  person    schedule 07.12.2011
comment
@ DorinDuminica @JesseB Только что. Спасибо!   -  person claras    schedule 07.12.2011

Ответы (5)


arrow_upward
7
arrow_downward

Событие «change» работает для элементов поля SELECT и кнопки RADIO, но не для элементов INPUT. Вы должны использовать события «фокус/размытие» для обработки полей ввода, в вашем случае идеально подходит событие «размытие».

Если вы хотите обрабатывать много элементов с помощью jQuery, то лучше использовать операции на основе CLASS, в вашем случае просто добавьте один и тот же класс, «обязательный» для всех полей ввода, и выполните операции с этими полями, используя этот класс.

Я скорректировал ваши блоки кода, как указано выше, проверьте их один раз, а затем дайте мне знать, если обновленный код также не работает для вас, блоки кода обновлений:

HTML-код

<input type="text" id="title" name="title" value="" class="required">
<input type="text" id="size" name="size" value="" class="required">
<input type="text" id="length" name="length" value="" class="required">

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

JS-код

$('.required').blur(function() {
  var empty_flds = 0;
  $(".required").each(function() {
    if(!$.trim($(this).val())) {
        empty_flds++;
    }    
  });

  if (empty_flds) {
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
  } else {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
  }
});

Вы также можете проверить рабочий код напрямую здесь.

person Siva    schedule 07.12.2011
comment
Круто, почти работает! Он меняется на button2 всякий раз, когда заполняется любое из них, даже если заполнены не все обязательные поля. Я попытался изменить «это» на «.required», но, похоже, работает случайным образом. Можем ли мы как-то совместить с ним метод .each? Спасибо!! - person claras; 07.12.2011
comment
Скорректировал логику JS в соответствии с вашим требованием и обновил свой пост, теперь кнопка 1 будет отображаться только в том случае, если пользователь заполнил все поля, иначе по умолчанию появится кнопка 1. - person Siva; 07.12.2011
comment
Также изменена ссылка на рабочий код, чтобы вы могли проверить его напрямую. - person Siva; 07.12.2011

arrow_upward
18
arrow_downward

Этот?

$( ':input[required]', yourForm ).each( function () {
    if ( this.value.trim() !== '' ) {
        // ...
    }
});

где yourForm — ссылка на элемент FORM (здесь также можно использовать селектор). Это контекст — вам нужно искать только поля внутри формы.

person Šime Vidas    schedule 07.12.2011

arrow_upward
1
arrow_downward

Используйте функцию each() (doc):

$('[required]').each(function() {
    if($('[required]').val() != ''){ 
         $('.button1').fadeIn(0);
         $('.button2').fadeOut(0);
    }else{
         $('.button1').fadeOut(0);
         $('.button2').fadeIn(0);
    }
});
person talnicolas    schedule 07.12.2011
comment
Спасибо! Я думаю, что это должно работать, но не думаю, что это так. Не могли бы вы взглянуть на мой отредактированный вопрос? - person claras; 07.12.2011
comment
@claras, может быть, вы могли бы поставить class="required" вместо идентификаторов и элементов input, а затем получить к ним доступ с помощью $(".required").each... - person talnicolas; 07.12.2011

arrow_upward
1
arrow_downward

Вам нужно получить значение каждого элемента, и если ВСЕ из них не пусты, сделайте первое, а если ЛЮБОЙ из них пуст, сделайте второе, правильно?

[не проверено]

// test if any of the values are not empty
var is_empty = false;
$('[required]').each( function(idx, elem) {
    is_empty = is_empty || ($(elem).val() == '');
});

// now do the thing, but only if ALL the values are not empty
if ( ! is_empty) {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}
person Benjam    schedule 07.12.2011

arrow_upward
0
arrow_downward

Просто, и для дополнительной меры добавьте красную рамку

Сначала создайте стиль

.redborder { border: 2px solid red; }

Затем простой бит Javascript

// Remove all redborders
    $("#my_form :input.redborder").removeClass("redborder");
// Check all required fields have text, you can even check other values
    $("#my_form :input[required]").each(function() {
        if ($.trim($(this).val()) == "") $(this).addClass("redborder");
    });
// If any input has a red border, return
    if ($("#todo_edit_form .redborder").length > 0 ) return;
person Justin Levene    schedule 06.02.2014