name - jquery input

Compruebe si las entradas están vacías usando jQuery

Question

Tengo un formulario en el que me gustaría que se completen todos los campos. Si se hace clic en un campo y luego no se rellena, me gustaría mostrar un fondo rojo.

Aquí está mi código:

$(''#apply-form input'').blur(function () {
  if ($(''input:text'').is(":empty")) {
    $(this).parents(''p'').addClass(''warning'');
  }
});

Aplica la clase de advertencia independientemente de que el campo se complete o no.

¿Qué estoy haciendo mal?

Answer 1

¿Cómo es que nadie menciona

$(this).filter(''[value=]'').addClass(''warning'');

me parece más jquery

Answer 2

Aquí hay un ejemplo usando keyup para la entrada seleccionada. También utiliza un recorte para asegurarse de que una secuencia de solo caracteres de espacios en blanco no desencadene una respuesta sincera. Este es un ejemplo que puede usarse para comenzar un cuadro de búsqueda o algo relacionado con ese tipo de funcionalidad.

YourObjNameSpace.yourJqueryInputElement.keyup(function (e){
   if($.trim($(this).val())){
       // trimmed value is truthy meaning real characters are entered
    }else{
       // trimmed value is falsey meaning empty input excluding just whitespace characters
    }
}

Answer 3

Con HTML 5 podemos usar una nueva función "requerida", simplemente agréguela a la etiqueta que desea que se le solicite, como:

<input type=''text'' required>

Answer 4

Considere usar el complemento de validación jQuery en su lugar. Puede ser un poco excesivo para campos obligatorios simples, pero está lo suficientemente maduro como para manejar casos de borde que ni siquiera has pensado todavía (ni ninguno de nosotros lo haría hasta que nos topáramos con ellos).

Puede etiquetar los campos requeridos con una clase de "requerido", ejecute $ (''form''). Validate () in $ (document) .ready () y eso es todo lo que necesita.

Incluso está alojado en Microsoft CDN también, para una entrega rápida: http://www.asp.net/ajaxlibrary/CDN.ashx

Answer 5

El evento keyup detectará si el usuario también ha desactivado la casilla (es decir, la tecla de retroceso genera el evento pero la tecla de retroceso no genera el evento de pulsación de tecla en IE)

    $("#inputname").keyup(function() {

if (!this.value) {
    alert(''The box is empty'');
}});

Answer 6

El pseudo selector :empty se usa para ver si un elemento no contiene elementos secundarios, debe verificar el valor:

$(''#apply-form input'').blur(function() {
     if(!this.value) { // zero-length string
            $(this).parents(''p'').addClass(''warning'');
     }
});

Answer 7

Hacerlo en desenfoque es demasiado limitado. Se asume que se enfocó en el campo del formulario, así que prefiero hacerlo en el envío y mapear a través de la entrada. Después de años de lidiar con los trucos de desenfoque, enfoque, etc., mantener las cosas más simples producirá más facilidad de uso donde sea necesario.

$(''#signupform'').submit(function() {
    var errors = 0;
    $("#signupform :input").map(function(){
         if( !$(this).val() ) {
              $(this).parents(''td'').addClass(''warning'');
              errors++;
        } else if ($(this).val()) {
              $(this).parents(''td'').removeClass(''warning'');
        }   
    });
    if(errors > 0){
        $(''#errorwarn'').text("All fields are required");
        return false;
    }
    // do the ajax..    
});

Answer 8

Hay otra cosa en la que podría querer pensar. Actualmente, solo puede agregar la clase de advertencia si está vacía, ¿qué le parece eliminar la clase cuando el formulario ya no está vacío?

Me gusta esto:

$(''#apply-form input'').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents(''p'').addClass(''warning'');
    } else if ($(this).val()) {
          $(this).parents(''p'').removeClass(''warning'');
    }
});

Answer 9

Puedes probar algo como esto:

$(''#apply-form input[value!=""]'').blur(function() {
    $(this).parents(''p'').addClass(''warning'');
});

Se aplicará el evento .blur() solo a las entradas con valores vacíos.

Answer 10

Todos tienen la idea correcta, pero me gusta ser un poco más explícito y recortar los valores.

$(''#apply-form input'').blur(function() {
     if(!$.trim(this.value).length) { // zero-length string AFTER a trim
            $(this).parents(''p'').addClass(''warning'');
     }
});

Si no usa .length, entonces una entrada de ''0'' puede marcarse como incorrecta, y una entrada de 5 espacios podría marcarse como ok sin el $ .trim. La mejor de las suertes.

Answer 11

puedes usar tambien ..

$(''#apply-form input'').blur(function()
{
    if( $(this).val() == '''' ) {
          $(this).parents(''p'').addClass(''warning'');
    }
});

Si tienes dudas sobre los espacios, entonces prueba ...

$(''#apply-form input'').blur(function()
{
    if( $(this).val().trim() == '''' ) {
          $(this).parents(''p'').addClass(''warning'');
    }
});

Answer 12

function checkForm() {
  return $(''input[type=text]'').filter(function () {
    return $(this).val().length === 0;
  }).length;
}

Answer 13

$(''#apply-form input'').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents(''p'').addClass(''warning'');
    }
});

Y no necesariamente necesitas .length o ver si es >0 ya que una cadena vacía se evalúa como falsa de todos modos, pero si lo deseas con fines de legibilidad:

$(''#apply-form input'').blur(function()
{
    if( $(this).val().length === 0 ) {
        $(this).parents(''p'').addClass(''warning'');
    }
});

Si está seguro de que siempre operará en un elemento de campo de texto, entonces puede usar este this.value .

$(''#apply-form input'').blur(function()
{
      if( !this.value ) {
            $(this).parents(''p'').addClass(''warning'');
      }
});

También debe tener en cuenta que $(''input:text'') toma varios elementos, especifica un contexto o usa this palabra clave si solo desea una referencia a un elemento solitario (siempre que haya un campo de texto en los descendientes / hijos del contexto).

Answer 14

$(function() {
  var fields = $(''#search_form'').serializeArray();
  is_blank = true;
  for (var i = 0; i < fields.length; i++) {
    // excluded fields
    if ((fields[i].name != "locale") && (fields[i].name != "utf8")) {
      if (fields[i].value) {
        is_blank = false;
      }
    }
  }
  if (is_blank) {
    $(''#filters-button'').append('': OFF'');
  }
  else {
    $(''#filters-button'').append('': ON'');
  }
});

Compruebe si todos los campos están vacíos y agregue ON u OFF en Filter_button

Answer 15

<script type="text/javascript">
$(''input:text, input:password, textarea'').blur(function()
    {
          var check = $(this).val();
          if(check == '''')
          {
                $(this).parent().addClass(''ym-error'');
          }
          else
          {
                $(this).parent().removeClass(''ym-error'');  
          }
    });
 </script>// :)

Answer 16

if ($(''input:text'').val().length == 0) {
      $(this).parents(''p'').addClass(''warning'');
}