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

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

5 голосов
/ 07 декабря 2011

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

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

РЕДАКТИРОВАТЬ : для большего контекста, вот еще одна функция, которую я использовал ниже, чтобы применять ее при каждом изменении и 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>

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

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

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

Ответы [ 5 ]

17 голосов
/ 07 декабря 2011

Это 

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

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

7 голосов
/ 07 декабря 2011

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

Если вы хотите обработать много элементов с помощью 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);
  }
});

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

1 голос
/ 07 декабря 2011

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

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

// 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);
}
1 голос
/ 07 декабря 2011

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

$('[required]').each(function() {
    if($('[required]').val() != ''){ 
         $('.button1').fadeIn(0);
         $('.button2').fadeOut(0);
    }else{
         $('.button1').fadeOut(0);
         $('.button2').fadeIn(0);
    }
});
0 голосов
/ 07 февраля 2014

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

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

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