Controlla se gli input sono vuoti usando jQuery

Ho un modulo in cui vorrei che tutti i campi fossero compilati. Se un campo viene cliccato e quindi non compilato, vorrei visualizzare uno sfondo rosso.

Ecco il mio codice:

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

Applica la classe di avviso indipendentemente dal campo da compilare o meno.

Che cosa sto facendo di sbagliato?

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

E non è necessariamente necessario .lengtho vedere se è >0dal momento che una stringa vuota restituisce comunque un valore falso, ma se lo si desidera per motivi di leggibilità:

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

Se sei sicuro che funzionerà sempre su un elemento del campo di testo, allora puoi semplicemente usare this.value.

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

Inoltre, dovresti prendere nota che $('input:text')prende più elementi, specifica un contesto o usa la thisparola chiave se vuoi solo un riferimento a un elemento solitario (a condizione che ci sia un campo di testo nei discendenti / figli del contesto).

Ognuno ha l'idea giusta, ma mi piace essere un po 'più esplicito e tagliare i valori.

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

se non si utilizza .length, una voce di '0' può essere contrassegnata come non valida e una voce di 5 spazi potrebbe essere contrassegnata come ok senza $ .trim. Buona fortuna.

Farlo su sfocatura è troppo limitato. Presuppone che ci fosse un focus sul campo del modulo, quindi preferisco farlo su submit e mappare l'input. Dopo anni passati a gestire trucchi fantasiosi di sfocatura, messa a fuoco, ecc., Mantenere le cose più semplici produrrà più usabilità dove conta.

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

puoi usare anche ..

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

se hai dubbi sugli spazi, prova ..

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

come mai nessuno ha menzionato

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

mi sembra più jquery

L'evento keyup rileverà se l'utente ha cancellato anche la casella (ovvero backspace genera l'evento ma backspace non genera l'evento keypress in IE)

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

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

Prendi invece in considerazione l'utilizzo del plug-in di convalida jQuery . Può essere leggermente eccessivo per i campi obbligatori semplici, ma abbastanza maturo da gestire casi limite che non hai ancora pensato (e nessuno di noi fino a quando non ci incontreremo).

Puoi taggare i campi richiesti con una classe di "richiesto", eseguire $ ('form'). Validate () in $ (documento) .ready () e basta.

È persino ospitato su Microsoft CDN, per una consegna rapida: http://www.asp.net/ajaxlibrary/CDN.ashx

Lo :emptypseudo-selettore viene utilizzato per vedere se un elemento non contiene elementi secondari, è necessario verificare il valore:

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

C'è un'altra cosa a cui potresti pensare: attualmente può solo aggiungere la classe di avviso se è vuota, che ne dici di rimuovere di nuovo la classe quando il modulo non è più vuoto.

come questo:

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

Ecco un esempio usando il keyup per l'input selezionato. Utilizza anche un trim per assicurarsi che una sequenza di soli caratteri di spazio bianco non attivi una risposta veritiera. Questo è un esempio che può essere utilizzato per iniziare una casella di ricerca o qualcosa correlato a quel tipo di funzionalità.

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

Controlla se tutti i campi sono vuoti e aggiungi ON o OFF su Filter_button

Puoi provare qualcosa del genere:

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

Applicherà l' .blur()evento solo agli input con valori vuoti.

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

Con HTML 5 possiamo usare una nuova funzione "obbligatoria" per aggiungerla al tag che si desidera sia richiesta come:

<input type='text' required>

Grande raccolta di risposte, vorrei aggiungere che puoi anche farlo utilizzando il :placeholder-shownselettore CSS. Un po 'più pulito per usare IMO, specialmente se stai già usando jQ e hai dei segnaposto nei tuoi input.

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

È inoltre possibile utilizzare i selettori :valide :invalidse si dispone di input richiesti. È possibile utilizzare questi selettori se si utilizza l'attributo richiesto su un input.

Una soluzione pulita solo per CSS sarebbe:

input[type="radio"]:read-only {
        pointer-events: none;
}