Выбор пустого ввода текста с помощью jQuery
Как определить пустые текстовые поля с помощью jQuery? Я хотел бы сделать это с помощью селекторов, если это вообще возможно. Кроме того, я должен выбрать on 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>
9 ответов:
другой способ
$('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's 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); }); });
вы также можете сделать это, определив свой собственный селектор:
$.extend($.expr[':'],{ textboxEmpty: function(el){ return $(el).val() === ""; } });а затем получить к ним доступ Вот так:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
$(":text[value='']").doStuff();?
Кстати, Ваш призыв:
$('input[id=cmdSubmit]')...может быть значительно упрощенный и ускоренный с:
$('#cmdSubmit')...
как уже упоминалось в верхней ранжированной должности, следующие работы с двигателем шипения.
$('input:text[value=""]');в комментариях было отмечено, что удаление
:textчасть селектора вызывает сбой селектора. Я считаю, что происходит то, что Sizzle на самом деле полагается на встроенный селекторный движок браузера, когда это возможно. Когда:textдобавляется к селектору, он становится нестандартным селектором CSS и, следовательно, должен обрабатываться самим Sizzle. Это означает, что шипение проверяет текущее значение входных данных, а не атрибут "value", указанный в исходном HTML.таким образом, это умный способ проверить наличие пустых текстовых полей, но я думаю, что он зависит от поведения, характерного для Sizzle engine (использование текущего значения ввода вместо атрибута, определенного в исходном коде). Хотя Sizzle может возвращать элементы, соответствующие этому селектору,
document.querySelectorAllбудет возвращать только элементыvalue=""в HTML. Будьте бдительны.
$("input[type=text][value=]")после пробовать много версии Я нашел это наиболее логично.
отметим, что
textрегистр.
основываясь на ответе @James Wiseman, я использую это:
$.extend($.expr[':'],{ blank: function(el){ return $(el).val().match(/^\s*$/); } });это будет ловить входы, которые содержат только пробелы в дополнение к тем, которые "действительно" пусты.
здесь есть много ответов, предлагающих что-то вроде
[value=""]но я не думаю, что это действительно работает . . . или, по крайней мере, использование не последовательного. Я пытаюсь сделать что-то подобное, выбирая все входы с идентификаторами, начинающимися с определенной строки, которая также не имеет введенного значения. Я попробовал это:$("input[id^='something'][value='']")но это не работает. Как и их реверсирование. Смотрите это скрипка. Единственные способы, которые я нашел, чтобы правильно выбрать все входы с идентификаторами, начинающимися с a строка и без введенного значения были
$("input[id^='something']").not("[value!='']")и
$("input[id^='something']:not([value!=''])")но очевидно, что двойные негативы делают это действительно запутанным. Вероятно, первый ответ Russ Cam (с функцией фильтрации) является наиболее понятным методом.
Это позволит выбрать пустые текстовые входы с идентификатором, который начинается с "txt":
$(':text[value=""][id^=txt]')
Comments