Выбор пустого ввода текста с помощью jQuery
Как определить пустые текстовые поля с помощью jQuery? Я хотел бы сделать это с помощью селекторов, если это вообще возможно. Кроме того, я должен выбрать значение id, поскольку в реальном коде, где я хочу использовать это, я не хочу выбирать все текстовые входы.
В моих следующих двух примерах кода первая точно отображает значение, введенное пользователем в текстовое поле "txt2" . Второй пример указывает, что существует пустое текстовое поле, но если вы его заполняете, оно все равно считается пустым. Почему это?
Можно ли это сделать с помощью только селекторов?
Этот код сообщает значение в текстовом поле "txt2" :
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#cmdSubmit').click(function() {
alert($('[id=txt2]').val());
});
});
</script>
</head>
<body>
<form>
<input type="text" name="txt1" id="txt1" value="123" /><br />
<input type="text" name="txt2" id="txt2" value="" /><br />
<input type="text" name="txt3" id="txt3" value="abc" /><br />
<input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
</form>
</body>
</html>
Этот код всегда сообщает текстовое поле "txt2" как пустое:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#cmdSubmit').click(function() {
if($('[id^=txt][value=""]').length > 0) {
if (!confirm("Are you sure you want to submit empty fields?")) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
}
});
});
</script>
</head>
<body>
<form>
<input type="text" name="txt1" id="txt1" value="123" /><br />
<input type="text" name="txt2" id="txt2" value="" /><br />
<input type="text" name="txt3" id="txt3" value="abc" /><br />
<input type="submit" name="cmdSubmit" id='cmdSubmit' value="Send" /><br />
</form>
</body>
</html>
Ответы
Ответ 1
Другой способ
$('input:text').filter(function() { return $(this).val() == ""; });
или
$('input:text').filter(function() { return this.value == ""; });
или
// WARNING: if input element does not have the "value" attribute or this attribute was removed from DOM then such selector WILL NOT WORK!
// For example input with type="file" and file does not selected.
// It prefer to use "filter()" method.
// Thanks to @AaronLS
$('input:text[value=""]');
Рабочая демонстрация
код из демонстрации
JQuery
$(function() {
$('#button').click(function() {
var emptyTextBoxes = $('input:text').filter(function() { return this.value == ""; });
var string = "The blank textbox ids are - \n";
emptyTextBoxes.each(function() {
string += "\n" + this.id;
});
alert(string);
});
});
Ответ 2
Вы также можете сделать это, указав свой собственный селектор:
$.extend($.expr[':'],{
textboxEmpty: function(el){
return $(el).val() === "";
}
});
И затем обращайтесь к ним следующим образом:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
Ответ 3
$(":text[value='']").doStuff();
?
Кстати, ваш звонок:
$('input[id=cmdSubmit]')...
может быть значительно упрощено и ускорено с помощью:
$('#cmdSubmit')...
Ответ 4
Как упоминалось в верхней позиции, следующее работает с движком Sizzle.
$('input:text[value=""]');
В комментариях было отмечено, что удаление части :text
селектора приводит к сбою селектора. Я считаю, что случается, что Sizzle на самом деле полагается на браузер, встроенный в механизм выбора, когда это возможно. Когда :text
добавляется в селектор, он становится нестандартным селектором CSS и, следовательно, должен обрабатываться самим Sizzle. Это означает, что Sizzle проверяет текущее значение INPUT вместо атрибута value, указанного в исходном HTML.
Итак, это умный способ проверить пустые текстовые поля, но я думаю, что он зависит от поведения, характерного для движка Sizzle (для использования текущего значения INPUT вместо атрибута, определенного в исходном коде). Хотя Sizzle может возвращать элементы, соответствующие этому селектору, document.querySelectorAll
будет возвращать только элементы, имеющие value=""
в HTML. Предостережение emptor.
Ответ 5
$("input[type=text][value=]")
После попробовав много версии, я нашел это наиболее логичным.
Обратите внимание, что text
чувствителен к регистру.
Ответ 6
Здесь есть много ответов, предлагающих нечто вроде [value=""]
, но я не думаю, что это действительно работает., или, по крайней мере, использование несовместимо. Я пытаюсь сделать что-то подобное, выбирая все входы с идентификаторами, начинающимися с определенной строки, которая также не имеет введенного значения. Я пробовал это:
$("input[id^='something'][value='']")
но это не сработает. И не отменяет их. Смотрите fiddle. Единственные пути, которые я нашел, чтобы правильно выбрать все входы с идентификаторами, начинающимися со строки, и без введенного значения, были
$("input[id^='something']").not("[value!='']")
и
$("input[id^='something']:not([value!=''])")
но, очевидно, двойные негативы делают это действительно запутанным. Вероятно, первым ответом Russ Cam (с функцией фильтрации) является наиболее понятный метод.
Ответ 7
Основываясь на ответе @James Wiseman, я использую это:
$.extend($.expr[':'],{
blank: function(el){
return $(el).val().match(/^\s*$/);
}
});
Это будет ловить входы, которые содержат только пробелы в дополнение к тем, которые "действительно" пусты.
Пример: http://jsfiddle.net/e9btdbyn/
Ответ 8
Я бы рекомендовал:
$('input:text:not([value])')
Ответ 9
Это приведет к выбору пустых текстовых входов с идентификатором, начинающимся с "txt":
$(':text[value=""][id^=txt]')