Вибір порожнього введення тексту за допомогою jQuery

103

Як визначити порожні текстові поля за допомогою 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>

jquery css-selectors

— Крос
джерело

6

Хтось знає, чи '[value =]' ігнорує введення користувача та перевіряє лише те, що є в джерелі?

— Крос

Я маю рацію, що для цієї роботи створений порожній фільтр? $ ('input [type = text]: empty'). doStuff ();

— Антоні Карті

1

читайте документи - docs.jquery.com/Selectors/empty . Порожньо для елементів, які не мають дітей, НЕ мають значення

— Russ Cam

196

Інший спосіб

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

});

— Russ Cam
джерело

Для мене: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('ПОПЕРЕДЖЕННЯ') ); }

— Крос

Що відокремлює ваш останній приклад від мого другого? Мені потрібно вибрати id, оскільки в реальному коді я не буду переглядати всі текстові введення. Мій другий приклад не працює з введенням користувача, але ваш робить.

— Крос

1

Здається, що робочий селектор пов'язаний із: текстом у селекторі - якщо ви відкриєте робочу демонстраційну версію та додаєте / редагуєте URL-адресу, ви можете грати із використовуваним селектором. Якщо ви знімете: текст, селектор більше не працює коректно, навіть із $ ('input [value = ""]'). Можливо, помилка в селекторному двигуні Sizzle, але я не встигаю досліджувати. До речі, я б запропонував використовувати тег елемента в селекторі, інакше кожен елемент буде перевірятися, чи є відповідність значень атрибутів.

— Russ Cam

3

Приємна відповідь! Але ви також можете переконатися, що значення елемента введення буквально є нульовим (порожні пробіли!). Переконайтеся, що ви обрізаєте порожні пробіли в цьому випадку. Щось подібне$('input:text').filter(function() { return $(this).val().trim() == ""; });

— Vineeth Pradhan

31

Зауважте, що якщо елемент присутній, але не має атрибута значення, то [value=""]селектор не працює, оскільки він не знаходить атрибута значення. Однак техніка .filter працює в цьому сценарії.

— AaronLS

26

Ви також можете це зробити, визначивши власного вибору:

$.extend($.expr[':'],{
    textboxEmpty: function(el){
        return $(el).val() === "";
    }
});

А потім отримуйте доступ до них так:

alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection

— Джеймс Вісман
джерело

Я трохи стурбований виступом. Але, напевно, найпростіша відповідь!

— aliqandil

19

$(":text[value='']").doStuff();

?

До речі, ваш дзвінок:

$('input[id=cmdSubmit]')...

можна значно спростити та прискорити:

$('#cmdSubmit')...

— клетус
джерело

Я думаю, що немає квадратної дужки, що закривається.

— Поширене

Ваш перший приклад - це те, що робить мій непрацюючий приклад. Я хочу знати, чи додав користувач текст у поле введення, ваш приклад цього не робить.

— Крос

Я поспішав, здається, ваш приклад працює, але він не вибирає ідентифікатор, що я повинен робити.

— Крос

Виконувати "введення [id = ..]" - це не те саме, що "#". # не дає масиву об’єктів.

— dev4life

@ dev4life, якщо ви використовуєте кілька елементів на сторінці з однаковим ідентифікатором, ви робите це неправильно

— Шон Кендл

12

Як уже згадувалося у найвищому рейтингу, наступні роботи з двигуном Sizzle.

$('input:text[value=""]');

У коментарях зазначалося, що видалення :textпорції селектора викликає збій селектора. Я вважаю, що зараз відбувається те, що Sizzle насправді покладається на вбудований у селектор двигун браузера, коли це можливо. Коли :textвін додається до селектора, він стає нестандартним селектором CSS і, таким чином, повинен працювати сам Sizzle. Це означає, що Sizzle перевіряє поточне значення INPUT, а не атрибут "value", вказаний у вихідному HTML.

Отже, це розумний спосіб перевірити наявність порожніх текстових полів, але я думаю, що він покладається на поведінку, характерну для двигуна Sizzle (поведінку використання поточного значення INPUT замість атрибута, визначеного у вихідному коді). Хоча Sizzle може повертати елементи, що відповідають цьому селектору, document.querySelectorAllвін поверне лише елементи, що містяться value=""в HTML. Caveat emptor.

— тридендер
джерело

5

`$("input[type=text][value=]")`

Після пробувати багато версії я це знайшов найбільш логічним.

Зауважте, що textце враховує регістри.

4

Спираючись на відповідь @James Wiseman, я використовую це:

$.extend($.expr[':'],{
    blank: function(el){
        return $(el).val().match(/^\s*$/);
    }
});

Це дозволить отримати вхідні дані, які містять лише пробіли на додаток до тих, які "справді" порожні.

Приклад: http://jsfiddle.net/e9btdbyn/

— Жорсткий
джерело

3

Я рекомендую:

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

— TM.
джерело

2

Це не спрацює, оскільки [атрибут] шукає наявність атрибута - не має він значення чи ні. <input value="">все одно буде відповідати.

— Бен Халл

Це було мені корисно при використанні Laravel для генерації полів форми (наприклад {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}), оскільки Laravel не додає атрибут 'value', якщо він порожній. Тоді я використовував: $('input:text:not([value]):visible:enabled:first');щоб знайти перше видиме поле з ввімкненим текстом.

— Райан

3

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

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

але це не працює. Не змінюється і назад. Дивіться цю загадку . Єдиним способом, який я знайшов, правильно вибрати всі вхідні дані з ідентифікаторами, що починаються з рядка та без введеного значення

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

і

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

але очевидно, що подвійні негативи роблять це справді заплутаним. Ймовірно, перша відповідь Русса Кама (з функцією фільтрації) є найбільш зрозумілим методом.

— tandrewnichols
джерело

1

Тут вибере порожні текстові введення з ідентифікатором, який починається з "txt":

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

— Крос
джерело

0

Оскільки створення об’єкта JQuery для кожного порівняння не є ефективним, просто використовуйте:

$.expr[":"].blank = function(element) {
    return element.value == "";
};

Тоді ви можете зробити:

$(":input:blank")

— Шини
джерело