jQuery - validación de entrada sencilla - "vacío" y "no está vacío"

Question

tengo una entrada que quiero para validar:

<input type="text" id="input" /> 

y aquí está la JS:

 jQuery("#input").live('change', function() { 

      if("#input:not(:empty)") { 
       alert('not empty'); 
      } 

      else if("#input:empty") { 
       alert('empty'); 
      } 
     }); 

Incluso cuando el " #input "está vacío, no hay forma de mostrar la alerta con el mensaje" vacío ". Entonces, básicamente, no importa lo que haga, solo la primera afirmación es verdadera y la segunda es falsa, siempre.

¿Qué pasa?

Answer 1

JQuery's :empty selector selecciona todos los elementos de la página que están vacíos en el sentido de que no tienen elementos secundarios, incluyendo los nodos de texto, no todas las entradas que no tienen ningún texto en ellos.

Jquery: How to check if an input element has not been filled in.

Aquí está el código robado del hilo superior:

$('#apply-form input').blur(function()   //whenever you click off an input element 
{     
    if(!$(this).val()) {      //if it is blank. 
     alert('empty');  
    } 
}); 

Esto funciona porque una cadena vacía en JavaScript es un 'valor Falsy', que básicamente significa que si intenta utilizar como valor booleano siempre se evaluará a false. Si lo desea, puede cambiar el condicional a $(this).val() === '' para mayor claridad. : D

Answer 2

usted puede hacer esto

$("#input").blur(function(){ 
    if($(this).val() == ''){ 
     alert('empty'); 
    } 
}); 

http://jsfiddle.net/jasongennaro/Y5P9k/1/

Cuando la entrada ha perdido focus que es .blur(), a continuación, comprobar el valor de la #input.

Si está vacío == '', activa la alerta.

Answer 3

jQuery("#input").live('change', function() { 
     // since we check more than once against the value, place it in a var. 
     var inputvalue = $("#input").attr("value"); 

     // if it's value **IS NOT** "" 
     if(inputvalue !== "") { 
      jQuery(this).css('outline', 'solid 1px red'); 
     } 

     // else if it's value **IS** "" 
     else if(inputvalue === "") { 
      alert('empty'); 
     } 

    }); 

Answer 4

En realidad no hay una manera más sencilla de hacer esto, simplemente:

if ($("#input").is('empty')) { 
console.log('empty'); 
} else { 
console.log('not empty'); 
}