Seleção de entrada de texto vazio usando jQuery

103

Como identifico caixas de texto vazias usando jQuery? Eu gostaria de fazer isso usando seletores, se possível. Além disso, devo selecionar o id, pois no código real onde desejo usá-lo, não desejo selecionar todas as entradas de texto.

Em meus dois exemplos de código a seguir, o primeiro exibe com precisão o valor digitado na caixa de texto "txt2" pelo usuário. O segundo exemplo identifica que há uma caixa de texto vazia, mas se você preenchê-la ainda a considera vazia. Por que é isso?

Isso pode ser feito usando apenas seletores?

Este código informa o valor na caixa de texto "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>

Este código sempre relata a caixa de texto "txt2" como vazia:

<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

— Cros
fonte

6

Alguém sabe se '[value =]' ignora a entrada do usuário e verifica apenas o que está na fonte?

— Cros

Estou certo de que o: filtro vazio é feito para este trabalho? $ ('input [type = text]: empty'). doStuff ();

— Antony Carthy

1

leia os documentos - docs.jquery.com/Selectors/empty . Vazio é para elementos que não têm filhos, NÃO nenhum valor

— Russ Cam

196

Outra maneira

$('input:text').filter(function() { return $(this).val() == ""; });

ou

$('input:text').filter(function() { return this.value == ""; });

ou

// 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=""]');

Demonstração de trabalho

código da demonstração

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
fonte

Para mim: if ($ ('[id ^ = txt]'). Filter (function () {return $ (this) .val () == "";}). Length> 0) {alert ('WARNING' ); }

— Cros

O que separa o seu último exemplo do meu segundo? Preciso selecionar no id, pois no código real não vou olhar para todas as entradas de texto. Meu segundo exemplo não funciona com a entrada do usuário, mas o seu sim.

— Cros

1

O seletor de trabalho parece ter a ver com: texto no seletor - se você abrir a demonstração de trabalho e adicionar / editar a URL, você pode brincar com o seletor usado. Se você tirar o: text, o seletor não funcionará mais corretamente, mesmo com $ ('input [value = ""]'). Possivelmente um bug no motor seletor Sizzle, mas não tenho tempo para investigar. A propósito, eu sugeriria usar uma tag de elemento no seletor, caso contrário, cada elemento será verificado para ver se há uma correspondência para os valores de atributo.

— Russ Cam

3

Boa resposta! Mas você também pode querer ter certeza de que o valor do elemento de entrada é literalmente nulo (espaços em branco!). Certifique-se de cortar os espaços em branco nesse caso. Algo assim$('input:text').filter(function() { return $(this).val().trim() == ""; });

— Vineeth Pradhan,

31

Observe que se o elemento estiver presente, mas não tiver um atributo de valor, o [value=""]seletor não funciona, pois não encontra um atributo de valor. No entanto, a técnica .filter funciona neste cenário.

— AaronLS 01 de

26

Você também pode fazer isso definindo seu próprio seletor:

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

E então acesse-os assim:

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

— James Wiseman
fonte

Estou um pouco preocupado com o desempenho. Mas provavelmente a resposta mais fácil!

— aliqandil

19

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

?

A propósito, sua chamada de:

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

pode ser bastante simplificado e acelerado com:

$('#cmdSubmit')...

— cletus
fonte

Acho que falta um colchete de fechamento. Uma fonte comum de jQuery que não funciona como esperado, difícil de detectar: - /

— OregonGhost

Seu primeiro exemplo é basicamente o que meu exemplo não funcional faz. Quero saber se o usuário adicionou texto ao campo de entrada, seu exemplo não faz isso.

— Cros

Fui apressado, seu exemplo parece funcionar, mas não seleciona no id, o que devo fazer.

— Cros

Fazer "input [id = ..]" não é o mesmo que "#". # não fornece uma matriz de objetos.

— dev4life

@ dev4life se você estiver usando vários elementos em uma página com o mesmo ID, está fazendo errado

— Sean Kendle

12

Conforme mencionado na postagem com melhor classificação, o seguinte funciona com o motor Sizzle.

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

Nos comentários, observou-se que remover a :textparte do seletor faz com que ele falhe. Eu acredito que o que está acontecendo é que o Sizzle realmente depende do mecanismo seletor embutido do navegador, quando possível. Quando :texté adicionado ao seletor, ele se torna um seletor CSS não padrão e, portanto, deve ser tratado pelo próprio Sizzle. Isso significa que o Sizzle verifica o valor atual de INPUT, em vez do atributo "valor" especificado no HTML de origem.

Portanto, é uma maneira inteligente de verificar se há campos de texto vazios, mas acho que depende de um comportamento específico do mecanismo Sizzle (o de usar o valor atual de INPUT em vez do atributo definido no código-fonte). Embora o Sizzle possa retornar elementos que correspondem a este seletor, document.querySelectorAllretornará apenas elementos que tenham value=""no HTML. Caveat emptor.

— terceiro
fonte

5

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

Depois de tentar várias versões , achei esta a mais lógica.

Observe que textdiferencia maiúsculas de minúsculas.

4

Com base na resposta de @James Wiseman, estou usando o seguinte:

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

Isso irá capturar as entradas que contêm apenas espaços em branco, além daqueles que estão "verdadeiramente" vazios.

Exemplo: http://jsfiddle.net/e9btdbyn/

— Gruffy
fonte

3

Eu recomendo:

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

— TM.
fonte

2

Isso não funcionará, porque [attribute] procura a presença de um atributo - não se ele tem um valor ou não. <input value="">ainda corresponderá.

— Ben Hull,

Isso foi útil para mim ao usar o Laravel para gerar campos de formulário (por exemplo {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) porque o Laravel não adiciona um atributo 'valor' se estiver em branco. Então eu usei: $('input:text:not([value]):visible:enabled:first');para encontrar o primeiro campo de entrada de texto habilitado vazio visível.

— Ryan

3

Há muitas respostas aqui sugerindo algo como, [value=""]mas não acho que realmente funcione. . . ou, pelo menos, o uso não é consistente. Estou tentando fazer algo semelhante, selecionando todas as entradas com ids começando com uma determinada string que também não tem nenhum valor inserido. Eu tentei isso:

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

mas não funciona. Nem revertê-los. Veja este violino . As únicas maneiras que encontrei de selecionar corretamente todas as entradas com ids começando com uma string e sem um valor inserido foram

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

e

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

mas, obviamente, os duplos negativos tornam isso muito confuso. Provavelmente, a primeira resposta de Russ Cam (com uma função de filtragem) é o método mais claro.

— Tandrewnichols
fonte

1

Isso selecionará entradas de texto vazias com um id que começa com "txt":

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

— Cros
fonte

0

Como criar um objeto JQuery para cada comparação não é eficiente, basta usar:

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

Então você pode fazer:

$(":input:blank")

— Pneus
fonte