Controleer of de ingangen leeg zijn met jQuery

Ik heb een formulier waarvan ik wil dat alle velden worden ingevuld. Als een veld wordt aangeklikt en vervolgens niet ingevuld, wil ik een rode achtergrond weergeven.

Hier is mijn code:

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

Het past de waarschuwingsklasse toe, ongeacht het veld dat wordt ingevuld of niet.

Wat doe ik verkeerd?

Antwoord 1, Autoriteit 100%

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

En u hebt niet noodzakelijkerwijs nodig .lengthof kijk of het >0sinds een lege reeks toch evalueert naar onjuist, maar als u de leesbaarheid wilt doeleinden:

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

Als u er zeker van bent, werkt het altijd op een textfield-element, dan kunt u gewoon this.value.

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

Ook moet u noteren dat $('input:text')meerdere elementen grijpt, een context opgeven of de thistrefwoord gebruiken als u gewoon een verwijzing naar wilt Een eenzame element (op voorwaarde dat er één tekstveld is in de nakomelingen / kinderen van de context).

Antwoord 2, Autoriteit 20%

Iedereen heeft het juiste idee, maar ik ben graag een beetje explicieter en trim de waarden.

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

Als u niet gebruikt, kan een invoer van ‘0’ worden gemarkeerd als slecht, en kan een invoer van 5 ruimtes worden gemarkeerd als OK zonder de $ .trim. Veel succes.

Antwoord 3, Autoriteit 4%

Doe het op wazig te doen is te beperkt. Het gaat ervan uit dat er focus op het formulierveld was, dus ik geef er de voorkeur aan om het op te dienen, en kaart door de invoer. Na jaren van het omgaan met fancy vervaging, focus, etc. tricks, het houden van dingen die eenvoudiger houden meer bruikbaarheid waar het telt.

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

Antwoord 4, Autoriteit 3%

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

Antwoord 5, Autoriteit 2%

U kunt ook gebruiken.

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

Als u twijfel heeft over spaties, probeer dan ..

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

Antwoord 6

Hoe komt niemand vermeld

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

lijkt meer jQuery-like voor mij

Antwoord 7

De KeyUp-gebeurtenis zal detecteren of de gebruiker het vak ook heeft vrijgemaakt (d.w.z. backspace verhoogt het evenement, maar backspace brengt de keypress-gebeurtenis niet op in IE)

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

Antwoord 8

Overweeg het gebruik van de jQuery validation plugin in plaats daarvan. Het kan enigszins overkill zijn voor eenvoudige vereiste velden, maar het volstaat genoeg dat het de randgevallen behandelt die u nog niet eens hebt nagedacht (noch iemand van ons totdat we in hen liepen).

U kunt de vereiste velden taggen met een klasse van “Vereist”, een $ (‘formulier’) uitvoeren. Valideren () in $ (Document). READIG () en dat is alles wat nodig is.

Het is ook zo gehost op de Microsoft CDN, voor snelle levering: http: // www. asp.net/ajaxLibrary/cdn.ashx

Antwoord 9

De :emptypseudo-selector wordt gebruikt om te zien of een element geen kinderen bevat, moet u de waarde controleren:

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

Antwoord 10

Er is nog iets waar je aan zou kunnen denken. Momenteel kan het alleen de waarschuwingsklasse toevoegen als deze leeg is, wat dacht je ervan om de klasse weer te verwijderen als het formulier niet meer leeg is.

zoals dit:

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

Antwoord 11

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

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

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

$('#search').on("input",function (e) {

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

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

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