Перевірте, чи вводи порожні за допомогою jQuery

У мене є форма, в якій я хотів би, щоб усі поля були заповнені. Якщо поле натиснуто, а потім не заповнене, я хотів би відобразити червоний фон.

Ось мій код:

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

Він застосовує клас попередження незалежно від того, заповнене чи не заповнене поле.

Що я роблю неправильно?

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

І вам не обов’язково потрібно .lengthчи бачити, чи не >0так це, якщо порожній рядок все одно вважається помилковим, але якщо ви хочете зробити це для читання:

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

Якщо ви впевнені, що він завжди буде працювати над текстовим полем, ви можете просто використовувати this.value.

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

Також слід врахувати, що $('input:text')захоплює декілька елементів, вказує контекст або використовує thisключове слово, якщо ви просто хочете посилання на самотній елемент (за умови, що в нащадках / дітях контексту є одне текстове поле).

У кожного є правильна ідея, але мені подобається бути трохи більш чітким і погоджувати цінності.

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

якщо ви не використовуєте .length, то запис "0" може бути позначений як поганий, а запис з 5 пробілів може бути позначений як нормальний без $ .trim. Удачі.

Робити це на розмиття занадто обмежено. Передбачається, що було зосереджено увагу на формі форми, тому я вважаю за краще це зробити при поданні та відображенні на карті введенням. Після років роботи з хитромудрими розмиттями, фокусом тощо. Трюки, спрощення речей дасть більшу зручність у використанні.

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

Ви також можете використовувати ..

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

якщо у вас є сумніви щодо пробілів, спробуйте ..

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

як так ніхто не згадав

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

мені здається більш схожим на джукі

Подія клавіатури визначить, якщо користувач також очистив вікно (тобто backspace піднімає подію, але backspace не збільшує подію клавіші в IE)

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

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

Спробуйте скористатися плагіном перевірки jQuery . Це може бути трохи надмірне для простих обов'язкових полів, але воно досить дозріло, щоб воно обробляло крайові випадки, про які ви ще навіть не думали (як і ніхто з нас, поки ми не зіткнулися з ними).

Ви можете позначити обов'язкові поля класом "обов'язковий", запустити $ ('form'). Validate () в $ (document) .ready () і все, що потрібно.

Він навіть розміщений на Microsoft CDN для швидкої доставки: http://www.asp.net/ajaxlibrary/CDN.ashx

:emptyПсевдо-селектор використовується , щоб побачити , якщо елемент не містить Чайлдс, ви повинні перевірити значення:

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

Є ще одне, про що ви можете подумати. Наразі він може додати клас попередження лише у випадку, якщо він порожній, як щодо видалення класу, коли форма більше не порожня.

подобається це:

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

Ось приклад використання клавіатури для вибраного входу. Він також використовує обробку, щоб переконатися, що послідовність просто білих символів пробілу не викликає правдиву відповідь. Це приклад, який можна використовувати для початку вікна пошуку або щось, що стосується цього типу функціональності.

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

Перевірте, чи всі поля порожні, і додайте ON або OFF на Filter_button

Ви можете спробувати щось подібне:

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

Він застосовуватиме .blur()події лише до входів із порожніми значеннями.

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

За допомогою HTML 5 ми можемо використати нову функцію, "необхідну", просто додати її до тегу, який потрібно мати, як:

<input type='text' required>

Чудова колекція відповідей, хотілося б додати, що ви також можете це зробити за допомогою :placeholder-shownселектора CSS. Трохи чистіше для використання IMO, особливо якщо ви вже використовуєте jQ та у вас є запасні місця.

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

Ви також можете скористатися :validі :invalidселекторами, якщо у вас є необхідні входи. Ви можете використовувати ці селектори, якщо ви використовуєте необхідний атрибут на вході.

Чистим рішенням для CSS є:

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