Verifique se as entradas estão vazias usando jQuery


492

Tenho um formulário no qual gostaria que todos os campos fossem preenchidos. Se um campo for clicado e depois não preenchido, gostaria de exibir um fundo vermelho.

Aqui está o meu código:

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

Aplica a classe de aviso independentemente do campo que está sendo preenchido ou não.

O que estou fazendo errado?


Respostas:


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

E você não precisa necessariamente .lengthnem vê se é >0porque uma string vazia é avaliada como false de qualquer maneira, mas se você quiser, para fins de legibilidade:

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

Se você tem certeza de que sempre funcionará em um elemento de campo de texto, basta usar this.value.

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

Além disso, você deve observar que $('input:text')captura vários elementos, especifique um contexto ou use a thispalavra - chave se desejar apenas uma referência a um elemento solitário (desde que exista um campo de texto nos descendentes / filhos do contexto).


2
Eu acho que funcionará melhor se você mudar de: if (! $ (This) .val ()) para: if (! $ (This) .val () && $ (this) .val ()! = "" )
alfasin

2
$ (this) .val (). length <1
Tomas

3
YourObjNameSpace.yourJqueryInputElement.keyup (function (e) {if ($. Trim ($ (this) .val ())) {// valor aparado é verdade} else {// valor aparado é falsey}}
Frankie Loscavio

Valido o tamanho dos campos com tão pouca frequência que esqueci completamente .val().lengthe, em vez disso, estava usando .length()o próprio elemento.
Tass

Para maior robustez, eu também adicionaria .trim () no final
HQuser

155

Todo mundo tem a idéia certa, mas eu gosto de ser um pouco mais explícito e aparar os valores.

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

se você não usar .length, uma entrada de '0' poderá ser sinalizada como ruim e uma entrada de 5 espaços poderá ser marcada como ok sem o $ .trim. Melhor da sorte.


18
Absolutamente certo. O corte é necessário, especialmente ao usar editores WYSIWYG exigentes (como jWYSIWYG, por exemplo).
27410 Josh Smith

Posso sugerir alterar o valor para val ---> if (! $. Trim (this.val) .length) {// string de comprimento zero APÓS um trim $ (this) .parents ('p'). AddClass (' Atenção'); }
K. Kilian Lindberg

this.valestaria undefinedlá. Precisaria ser $(this).val()- mas não há vantagem entre navegadores para isso, então deixei de fora por brevidade / velocidade.
Alex Sexton

33

Fazê-lo em desfoque é muito limitado. Ele assume que havia foco no campo do formulário, então eu prefiro fazê-lo no envio e mapear através da entrada. Depois de anos lidando com truques sofisticados de desfoque, foco etc., manter as coisas mais simples renderá mais usabilidade onde for importante.

$('#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..    
});

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

Não detectado TypeError: Não é possível ler a propriedade 'length' de undefined
Chuck D

@ChuckD eu estava ficando mesmo erro e eu descobri que eu estava faltando $em if (('input:text').val().length == 0) {que deveria serif ($('input:text').val().length == 0) {
fWd82

16

você pode usar também ..

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

se você tiver dúvidas sobre espaços, tente ..

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

9

como é que ninguém mencionou

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

parece mais jquery para mim


3
Isso não funciona no jQuery 1.9+, pois eles mudaram o funcionamento do filtro seletor. Jsfiddle.net/6r3Rk
Wick

2
Sugiro $ (this) .não ( '[valor]') addClass ( 'aviso') para 1.9. Jsfiddle.net/znZ9e
Jamie Pate

1
Acredito que apenas testa se o campo começou com um atributo value. Ele não testa o valor real do campo de formulário como você precisaria para validação. jsfiddle.net/T89bS ... o campo sem um atributo value é atingido por salmão, independentemente se você digitar algo nele.
Wick

5

O evento keyup detectará se o usuário também desmarcou a caixa (ou seja, o backspace gera o evento, mas o backspace não gera o evento de pressionamento de tecla no IE)

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

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

4

Considere usar o plugin de validação jQuery . Pode ser um exagero para campos obrigatórios simples, mas maduro o suficiente para lidar com casos extremos que você nem imaginou ainda (nem qualquer um de nós até encontrá-los).

Você pode marcar os campos obrigatórios com uma classe "obrigatório", executar um $ ('form'). Validate () em $ (document) .ready () e isso é tudo o que é necessário.

Também está hospedado na CDN da Microsoft, para entrega rápida: http://www.asp.net/ajaxlibrary/CDN.ashx


3

O :emptypseudo-seletor é usado para verificar se um elemento não contém filhos, você deve verificar o valor:

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

3

Há outra coisa em que você pode pensar: atualmente, ela só pode adicionar a classe de aviso se estiver vazia; que tal remover a classe novamente quando o formulário não estiver mais vazio?

como isso:

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

3

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


2

Aqui está um exemplo usando keyup para a entrada selecionada. Ele também usa um ajuste para garantir que uma sequência de apenas caracteres de espaço em branco não acione uma resposta verdadeira. Este é um exemplo que pode ser usado para iniciar uma caixa de pesquisa ou algo relacionado a esse tipo de funcionalidade.

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

2
$(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');
  }
});

Verifique se todos os campos estão vazios e acrescente ON ou OFF no botão Filter_b


1

Você pode tentar algo como isto:

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

Ele aplicará o .blur()evento apenas às entradas com valores vazios.


Boa solução, mas lembre-se de que isso só funciona se a entrada não estiver vazia na chamada da função e também apenas se o valor for salvo no atributo "value" da entrada.
Fabian von Ellerts 27/09/18

0
<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>// :)

Você provavelmente precisará cortar o espaço em branco também.
Raptor

0

Com o HTML 5, podemos usar um novo recurso "obrigatório", basta adicioná-lo à tag que você deseja, como:

<input type='text' required>


2
E todo o navegador não suporta isso ... Você precisa adicionar uma verificação js E uma verificação no
servidor

Título da pergunta, "Verifique se as entradas estão vazias usando o jQuery"
JoshYates1980 7/17/17

0

Ótima coleção de respostas, gostaria de acrescentar que você também pode fazer isso usando o :placeholder-shownseletor CSS. Um pouco mais limpo para usar o IMO, especialmente se você já estiver usando jQ e tiver espaços reservados em suas entradas.

if ($('input#cust-descrip').is(':placeholder-shown')) {
  console.log('Empty');
}

$('input#cust-descrip').on('blur', '', function(ev) {
  if (!$('input#cust-descrip').is(':placeholder-shown')) {
    console.log('Has Text!');
  }
  else {
    console.log('Empty!');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="text" class="form-control" id="cust-descrip" autocomplete="off" placeholder="Description">

Você também pode usar os seletores :valide :invalidse tiver entradas necessárias. Você pode usar esses seletores se estiver usando o atributo necessário em uma entrada.


0

Uma solução limpa apenas para CSS seria:

input[type="radio"]:read-only {
        pointer-events: none;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.