Выбор пустого ввода текста с помощью 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>

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')...

как уже упоминалось в топовом рейтинге, следующие работы с двигателем Sizzle.

$('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*$/);
    }
});

Это будет ловить входы, которые содержат только пробелы в дополнение к тем, которые "действительно" пусты.

пример:http://jsfiddle.net/e9btdbyn/


Я бы рекомендовал:

$('input:text:not([value])')

здесь есть много ответов, предлагающих что-то вроде [value=""] но я не думаю, что это действительно работает . . . или, по крайней мере, использование не последовательного. Я пытаюсь сделать что-то подобное, выбирая все входы с идентификаторами, начинающимися с определенной строки, которая также не имеет введенного значения. Я попробовал:

$("input[id^='something'][value='']")

но это не работает. Не обращая их. Смотрите это скрипка. Единственные способы, которые я нашел, чтобы правильно выбрать все входы с идентификаторами, начинающимися с string и без введенного значения were

$("input[id^='something']").not("[value!='']")

и

$("input[id^='something']:not([value!=''])")

но, очевидно, двойные негативы делают это действительно запутанным. Вероятно, первый ответ Russ Cam (с функцией фильтрации) является наиболее ясным методом.


это выберет пустые текстовые входы с идентификатором, который начинается с "txt":

$(':text[value=""][id^=txt]')