Pārbaudiet, vai ievades ir tukšas, izmantojot jQuery

Man ir veidlapa, kurā vēlos, lai visi lauki būtu aizpildīti. Ja tiek noklikšķināts uz lauka, bet tas netiek aizpildīts, es vēlētos, lai tiktu parādīts sarkans fons.

Šeit ir mans kods:

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

Tas piemēro brīdinājuma klasi neatkarīgi no tā, vai lauks ir vai nav aizpildīts.

Ko es daru nepareizi?

Danil Speransky
Rediģēts jautājums 1priekšpusdienari5t septembrī 2012 в 11:14
Programmēšana
jquery validation
6priekšpusdienari6t decembrī 2009 в 6:34
24 skati
Risinājums
$('#apply-form input').blur(function()
{
    if( !$(this).val() ) {
          $(this).parents('p').addClass('warning');
    }
});

Un jums nav obligāti nepieciešams .length vai pārbaudīt, vai tas ir >0, jo tukša virkne tik un tā ir false, bet, ja vēlaties, lasāmības labad:

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

Ja esat'pārliecināts, ka tas vienmēr darbosies ar teksta lauka elementu, tad varat vienkārši izmantot this.value.

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

Jāņem vērā arī tas, ka $('input:text') sagrābj vairākus elementus, norādiet kontekstu vai izmantojiet atslēgas vārdu this, ja vēlaties tikai atsauci uz vienu elementu (ar nosacījumu, ka konteksta pēcnācējos/bērnos ir viens teksta lauks).

Paul Roub
Rediģēta atbilde 9pēcpusdienari0t janvārī 2017 в 6:42
Komentāri (4)
 
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
Graviton
Rediģēta atbilde 6priekšpusdienari6t decembrī 2009 в 6:51
Komentāri (2)

Pseidoselektors :empty tiek izmantots, lai pārbaudītu, vai elementā nav atvasinātu elementu, jums ir jāpārbauda vērtība :

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