span - cambiar texto jquery
Seleccionar el ingreso de texto vacío usando jQuery (9)
¿Cómo identifico cuadros de texto vacíos usando jQuery? Me gustaría hacerlo usando selectores si es posible. Además, debo seleccionar en id 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 rellena todavía lo considera como 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 textbox "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>
$("input[type=text][value=]")
Después de probar muchas versiones , encontré esto como el más lógico.
Tenga en cuenta que el text distingue mayúsculas de minúsculas.
Aquí hay muchas respuestas 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 comiencen con una cierta cadena que tampoco tenga ningún valor ingresado. Intenté esto:
$("input[id^=''something''][value='''']")
pero no funciona. Tampoco los revierte. Mira este fiddle . 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 una función de filtrado) es el método más claro.
Como se menciona en la publicación mejor clasificada, lo siguiente funciona con el motor Sizzle.
$(''input:text[value=""]'');
En los comentarios, se observó que al eliminar la parte del :text del selector, el selector falla. Creo que lo que está sucediendo es que Sizzle realmente depende del motor de selección integrado del navegador cuando sea posible. Cuando :text se agrega al selector, se convierte en un selector de CSS no estándar y, por lo tanto, debe ser manejado por Sizzle. Esto significa que Sizzle verifica el valor actual de INPUT, en lugar del atributo "value" especificado en el código fuente HTML.
Por lo tanto, es una manera inteligente de verificar 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). Aunque Sizzle podría devolver elementos que coincidan con este selector, document.querySelectorAll solo devolverá elementos que tengan value="" en el HTML. Caveat Emptor.
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=""]'');
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);
});
});
Esto seleccionará las entradas de texto vacías con una identificación que comienza con "txt":
$('':text[value=""][id^=txt]'')
Sobre la base de la respuesta de @James Wiseman, estoy usando esto:
$.extend($.expr['':''],{
blank: function(el){
return $(el).val().match(/^/s*$/);
}
});
Esto atrapará entradas que contienen solo espacios en blanco además de los que están "verdaderamente" vacíos.
Ejemplo: http://jsfiddle.net/e9btdbyn/
También puede hacerlo definiendo su propio selector:
$.extend($.expr['':''],{
textboxEmpty: function(el){
return $(el).val() === "";
}
});
Y luego acceda a ellos de esta manera:
alert($('':text:textboxEmpty'').length); //alerts the number of text boxes in your selection
Yo lo recomiendo:
$(''input:text:not([value])'')
$(":text[value='''']").doStuff();
?
Por cierto, tu llamada de:
$(''input[id=cmdSubmit]'')...
se puede simplificar y acelerar en gran medida con:
$(''#cmdSubmit'')...