Seleccionar entrada de texto vacía usando jQuery
¿Cómo puedo identificar cuadros de texto vacíos usando jQuery? Me gustaría hacerlo usando selectores si es posible. Además, debo seleccionar on id ya que en el código real donde quiero usar esto no quiero seleccionar todas las entradas de texto.
En mis 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 rellenas, todavía 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 reporta el cuadro de texto "txt2"como 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>
9 answers
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=""]');
Demostración de Trabajo
Código de la demo
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);
});
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-20 15:43:47
También puedes hacerlo definiendo tu propio selector:
$.extend($.expr[':'],{
textboxEmpty: function(el){
return $(el).val() === "";
}
});
Y luego acceder a ellos de esta manera:
alert($(':text:textboxEmpty').length); //alerts the number of text boxes in your selection
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-05-25 12:22:34
$(":text[value='']").doStuff();
?
Por cierto, tu llamada de:
$('input[id=cmdSubmit]')...
Puede serenormemente simplificado y acelerado con:
$('#cmdSubmit')...
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-19 11:48:15
Como se mencionó en el post de mejor clasificado, lo siguiente funciona con el motor Sizzle.
$('input:text[value=""]');
En los comentarios, se observó que la eliminación de la porción :text del selector hace que el selector falle. Creo que lo que está sucediendo es que Sizzle en realidad se basa en el motor de selector integrado en el navegador cuando sea posible. Cuando se agrega :text 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 la corriente valor de la ENTRADA, en lugar del atributo" value " especificado en el código HTML de origen.
Así que es una forma inteligente de comprobar si hay 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 la ENTRADA en lugar del atributo definido en el código fuente). Si bien Sizzle puede devolver elementos que coincidan con este selector, document.querySelectorAll solo devolverá elementos que tengan value="" en el HTML. Caveat emptor.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-12-02 02:41:17
$("input[type=text][value=]")
Después de probar una gran cantidad de versión encontré esto el más lógico.
Tenga en cuenta que text distingue entre mayúsculas y minúsculas.
Basándome en 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/
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-09-26 11:43:52
Yo recomendaría:
$('input:text:not([value])')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-19 12:19:28
Hay muchas respuestas aquí que sugieren algo como [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 ids que comienzan con una cierta cadena que tampoco tienen ningún valor ingresado. Probé esto:
$("input[id^='something'][value='']")
Pero no funciona. Tampoco lo hace revertirlas. Ver este violín. Las únicas formas que encontré para seleccionar correctamente todas las entradas con ids que comienzan con una cadena y sin una el valor introducido fue
$("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 una función de filtrado) es el método más claro.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-11-20 20:56:19
Esto seleccionará entradas de texto vacías con un id que comienza con "txt":
$(':text[value=""][id^=txt]')
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-08-19 12:57:55