Verifique se as inputs estão vazias usando jQuery

Eu tenho um formulário que gostaria que todos os campos fossem preenchidos. Se um campo é clicado e não preenchido, gostaria de exibir um plano de 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 class de aviso, independentemente do campo que está sendo preenchido ou não.

O que estou fazendo de errado?

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

E você não precisa necessariamente de .length ou ver se é >0 já que uma string vazia é avaliada como false, mas se você quiser, por questões 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 this.value , você pode simplesmente 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, especifica um contexto ou usa a palavra this chave this se você quiser apenas uma referência a um elemento solitário (desde que haja um campo de texto nos descendentes / filhos do contexto).

Todo mundo tem a idéia certa, mas eu gosto de ser um pouco mais explícito e cortar 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, então uma input de ‘0’ pode ser marcada como ruim, e uma input de 5 espaços pode ser marcada como ok sem o $ .trim. Melhor da sorte.

Fazê-lo no desfoque é muito limitado. Ele pressupõe que havia foco no campo de formulário, então prefiro fazê-lo ao enviar e mapear por meio da input. Depois de anos lidando com borrões extravagantes, foco, etc. truques, manter as coisas mais simples renderá mais usabilidade onde isso é 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.. }); 
 if ($('input:text').val().length == 0) { $(this).parents('p').addClass('warning'); } 

como é que ninguém mencionou

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

parece mais parecido com jquery para mim

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

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

Você pode marcar os campos obrigatórios com uma class “required”, executar um $ (‘form’). Validate () em $ (document) .ready () e isso é tudo.

Ele também é hospedado no Microsoft CDN, para uma entrega rápida: http://www.asp.net/ajaxlibrary/CDN.ashx

O evento keyup detectará se o usuário também limpou a checkbox (ou seja, o backspace gera o evento, mas o backspace não ativa o evento keypress no IE)

  $("#inputname").keyup(function() { if (!this.value) { alert('The box is empty'); }}); 

O :empty pseudo-seletor :empty é usado para ver se um elemento não contém childs, você deve verificar o valor:

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

Há uma outra coisa que você pode querer pensar, atualmente ele só pode adicionar a class de aviso se estiver vazia, que tal remover a class 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'); } }); 
 function checkForm() { return $('input[type=text]').filter(function () { return $(this).val().length === 0; }).length; } 

Aqui está um exemplo usando a chave para a input selecionada. Ele também usa um corte para garantir que uma seqüência de caracteres de espaço em branco não acione uma resposta truncosa. Este é um exemplo que pode ser usado para iniciar uma checkbox 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 } } 
 $(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 Filter_button

Você pode tentar algo assim:

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

Ele aplicará o evento .blur() somente às inputs com valores vazios.

 // :) 

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