Вопрос по javascript, jquery – Как выбрать пустые входы (значение = «») с помощью jQuery

47

Как я могу проверить пустые значения required) поля ввода в разделе, а затем добавить к ним класс для события, используя jQuery? Пока что я пробовал:

jQuery("#sender_container input.required").val("").addClass("error");

Но, кажется,ПОСТАВИ значение, а не проверять его. Любые идеи

Ваш Ответ

8   ответов
87
jQuery("#sender_container input.required").filter(function() {
    return !this.value;
}).addClass("error");​

filter и нет[value=""] ты можешь видеть в это ДЕМО

Причина в том, что селекторы атрибутов проверяют начальное состояние элемента, а не текущее состояние. (обратите внимание, что вы можете изменить «начальное» состояние с помощьюattr функция, но это плохая практика, вы всегда должны использоватьprop)

Так что, если вы измените входное значение, текущее значение не повлияет на селектор атрибута. не мудрый ...:)

Заметки

.val() Возвращает значение элемента формы и разрыв цепочки jQuery,$('selector').val().addClass('foo') Ошибк, возвращаемое значение - строка \количеств

.val(valueToSet) Наборы значение элемента формы и не разрывает цепочку jQuery.
$('selector').val("some value").addClass('foo') - Действительно, возвращаемое значение является jQuery

Спасибо, но это работает, только если ВСЕ входы пусты. Но если у меня есть 2 обязательных поля, одно из которых имеет значение, а другое пустое, ничего не происходит. Richard Harris
@. Ричард Харрис Это должно работать нормально и в этом случае. в вашем коде есть что-то еще. видеть это демо gdoron
@. Ричард Харрис Или это демо использовал CSS из Codeparadox gdoron
Hmm. Попытка выяснить, почему это не работает для меня. Кстати, ваш демонстрационный код недействителен, потому что ваш контейнер div немедленно закрывается <div id = "foo" />. Спасибо за помощь до сих пор! Обновлю здесь, когда я смогу заставить его работать на меня. Ура! Richard Harris
@ personne3000, если это не задокументировано как официально поддерживаемое, я бы никогда не использовал его, так как это выглядит немного странно. Но если это произойдет, это отличный способ! Спасибо, что доказали мне, сэр. gdoron
10
$('input:text[value=]','#sender_container').addClass('error');

DEMO

Это не будет работать в jQuery 1.9+, смотрите Jquery.com / обновить-гид / 1,9 / # атр-против-проп personne3000
3
$('#sender_container input.required[value=""]').addClass('error')
Это будет работать только для атрибута значения. gdoron
На самом деле это не будет работать вообще, между входом и селектором атрибута есть неправильный пробел ... :) он будет искать дочерние элементы ввода с пустым значением атрибута, входные данные не могут иметь дочерние элементы ... gdoron
+ 1-ой забыл про редактирование моего ответа Parv Sharma
Спасибо, Парв. Теперь ваш код должен работать для любых дочерних элементов содержащего элемента с идентификатором sender_container, который является полем ввода с использованием обязательного класса и значение которого пустое, верно? Richard Harris
да, это должно работать Parv Sharma
1
jQuery('#sender_container input.required[value=""]').addClass("error");

Ты можешь попробовать это:

$('input:not([value!=""])').addClass('error');

DEMO

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

внутренние или внешние кавычки должны быть одинарными или избегать внутренних кавычек. Jamiec
Это будет работать только для атрибута значения. gdoron
@ gdoron: я думаю, что это!= И это, вероятно, то, что я имел в виду ранее, но не мог правильно вспомнить. Я полагаю, так как[attr!=value] не является селектором CSS3 (afaik), он оценивается Sizzle и, кажется, принимает фактическое значение. @thecodeparadox: Только потому, что он работает, не означает, что его следует использовать. Сложно понять двойные отрицания. Felix Kling
@ gdoron Да, никогда не буду его использовать. я должен удалить этот пост или оставить здесь, чтобы другой знал thecodeparadox
@ thecodeparadox Оставьте код, это хороший инструмент обучения, для дальнейшего использования. Richard Harris
0
$field = $("#sender_container input.required");
if( ! $field.val())
{
    $field.addClass("error");
}

Это произведения только одно поле. gdoron
$ ("# sender_container input.required"). each (function (if (! $ (this) .val ()) {$ (this) .addClass ("error");})) попробуйте это. Nils
Затем используйтеfilter ....:) gdoron
0

вода, то будет делать следующее:

var elements = $('#sender_container input.required[value=""]')

Но учтите, что это не сработает, есvalueтрибут @ отсутствует. Это также не будет работать для текущего входного значения, если оно было изменено пользователем или скриптом.

Если вы хотите получить текущее значение ввода, вы можете использовать JQuery sfilter функция:

var elements = $('#sender_container input.required').filter(function() {
  return this.value === '';

  // alternatively for "no value":
  // return !this.value;
})

После того как вы выбрали JQuery элементы, которые вы можете добавить свой класс:

elements.addClass('error');
0

чтобы проверить все поля, это может помочь.

$('#sender_container [required]').each(function(index)
{
       if (!($(this).val())) $(this).addClass('error');
}

});
0

Для тех Input.required не работает напишите как ниже:

jQuery('#sender_container input[required]').val("").addClass("error");

Похожие вопросы