Seleccionar entrada de texto vacía usando jQuery

103

¿Cómo identifico los cuadros de texto vacíos usando jQuery? Me gustaría hacerlo usando selectores si es posible. Además, debo seleccionar una identificación, ya que en el código real donde quiero usar esto, no quiero seleccionar todas las entradas de texto.

En los siguientes dos ejemplos de código, el primero muestra con precisión el valor escrito en el cuadro de texto "txt2" por el usuario. El segundo ejemplo identifica que hay un cuadro de texto vacío, pero si lo completa, aún lo considera vacío. ¿Por qué es esto?

¿Se puede hacer esto usando solo selectores?

Este código informa el valor en el cuadro 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 siempre informa que el cuadro de texto "txt2" está vacío:

<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
fuente

6

¿Alguien sabe si '[value =]' ignora la entrada del usuario y solo verifica lo que hay en la fuente?

Cros

¿Tengo razón en que el filtro: vacío está hecho para este trabajo? $ ('input [type = text]: empty'). doStuff ();

Antony Carthy

1

lea los documentos: docs.jquery.com/Selectors/empty . Vacío es para elementos que no tienen hijos, NO sin valor

Russ Cam

196

De otra manera

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

o

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

o

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

Demo de trabajo

código de la demostración

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
fuente

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

Cros

¿Qué separa su último ejemplo del segundo? Necesito seleccionar en id, ya que en el código real no miraré todas las entradas de texto. Mi segundo ejemplo no funciona con la entrada del usuario, pero el tuyo sí.

Cros

1

El selector de trabajo parece tener que ver con: texto en el selector: si abre la demostración de trabajo y agrega / edita a la URL, puede jugar con el selector utilizado. Si quita el texto:, el selector ya no funciona correctamente, incluso con $ ('input [value = ""]'). Posiblemente un error en el motor selector de Sizzle, pero no tengo tiempo para investigar. Por cierto, sugeriría usar una etiqueta de elemento en el selector; de lo contrario, se verificará cada elemento para ver si hay una coincidencia para los valores de atributo.

Russ Cam

3

¡Buena respuesta! Pero es posible que también desee asegurarse de que el valor del elemento de entrada sea literalmente nulo (¡espacios en blanco!). Asegúrese de recortar los espacios en blanco en ese caso. Algo como esto$('input:text').filter(function() { return $(this).val().trim() == ""; });

Vineeth Pradhan

31

Tenga en cuenta que si el elemento está presente pero no tiene un atributo de valor, el [value=""]selector no funciona porque no encuentra un atributo de valor. Sin embargo, la técnica .filter funciona en este escenario.

AaronLS

26

También puede hacerlo definiendo su propio selector:

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

Y luego acceda a ellos así:

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

James Wiseman
fuente

Estoy un poco preocupado por la actuación. ¡Pero probablemente la respuesta más fácil!

aliqandil

19

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

?

Por cierto, tu llamada de:

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

se puede simplificar y acelerar enormemente con:

$('#cmdSubmit')...

cletus
fuente

Supongo que falta un corchete de cierre. Una fuente común de jQuery que no funciona como se esperaba, es difícil de detectar: - /

OregonGhost

Su primer ejemplo es básicamente lo que hace mi ejemplo que no funciona. Quiero saber si el usuario agregó texto al campo de entrada, su ejemplo no hace esto.

Cros

Me apresuré, su ejemplo parece funcionar, pero no selecciona la identificación, lo cual debo hacer.

Cros

Hacer "input [id = ..]" no es lo mismo que "#". # no le da una matriz de objetos.

dev4life

@ dev4life si está utilizando varios elementos en una página con la misma ID, lo está haciendo mal

Sean Kendle

12

Como se mencionó en la publicación mejor clasificada, lo siguiente funciona con el motor Sizzle.

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

En los comentarios, se observó que eliminar la :textparte del selector hace que el selector falle. Creo que lo que está sucediendo es que Sizzle realmente se basa en el motor selector integrado del navegador cuando es posible. Cuando :textse agrega al selector, se convierte en un selector CSS no estándar y, por lo tanto, debe ser manejado por Sizzle. Esto significa que Sizzle comprueba el valor actual de la ENTRADA, en lugar del atributo "valor" especificado en el código fuente HTML.

Así que es una forma inteligente de buscar campos de texto vacíos, pero creo que se basa en un comportamiento específico del motor Sizzle (el de usar el valor actual de INPUT en lugar del atributo definido en el código fuente). Si bien Sizzle puede devolver elementos que coincidan con este selector, document.querySelectorAllsolo devolverá elementos que tengan value=""en el HTML. Caveat emptor.

sediento
fuente

5

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

Después de probar muchas versiones , encontré que esta era la más lógica.

Tenga en cuenta que textdistingue entre mayúsculas y minúsculas.

fuente

4

Sobre la base de la respuesta de @James Wiseman, estoy usando esto:

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

Esto capturará las entradas que contienen solo espacios en blanco además de las que están "verdaderamente" vacías.

Ejemplo: http://jsfiddle.net/e9btdbyn/

Gruñón
fuente

3

Yo lo recomiendo:

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

TM.
fuente

2

Esto no funcionará porque [atributo] busca la presencia de un atributo, no si tiene un valor o no. <input value="">todavía coincidirá.

Ben Hull

Esto fue útil para mí al usar Laravel para generar campos de formulario (por ejemplo {{Form::text('first_name', Input::old('first_name'), array('class' => 'form-control', 'required'))}}) porque Laravel no agrega un atributo de 'valor' si está en blanco. Entonces usé: $('input:text:not([value]):visible:enabled:first');para encontrar el primer campo de entrada de texto habilitado vacío visible.

Ryan

3

Aquí hay muchas respuestas que sugieren algo así, [value=""]pero no creo que realmente funcione. . . o al menos, el uso no es consistente. Estoy tratando de hacer algo similar, seleccionando todas las entradas con identificadores que comienzan con una determinada cadena que tampoco tienen ningún valor ingresado. Probé esto:

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

pero no funciona. Tampoco revertirlos. Mira este violín . Las únicas formas que encontré para seleccionar correctamente todas las entradas con identificadores que comienzan con una cadena y sin un valor ingresado fueron

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

y

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

pero obviamente, los dobles negativos lo hacen realmente confuso. Probablemente, la primera respuesta de Russ Cam (con función de filtrado) sea el método más claro.

tandrewnichols
fuente

1

Esto seleccionará entradas de texto vacías con una identificación que comience con "txt":

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

Cros
fuente

0

Dado que crear un objeto JQuery para cada comparación no es eficiente, simplemente use:

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

Entonces puedes hacer:

$(":input:blank")

Llantas
fuente

Seleccionar entrada de texto vacía usando jQuery

Respuestas:

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

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