Проверьте, являются ли входные данные пустыми, используя jQuery

Question

У меня есть форма, которую я хотел бы, чтобы все поля были заполнены. Если поле щелкнуло, а затем не заполнено, я хотел бы отобразить красный фон.

Вот мой код:

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

Применяет класс предупреждения независимо от того, заполнено ли поле или нет.

Что я делаю не так?

Answer 1

Псевдо-селектор :empty используется, чтобы увидеть, не содержит ли элемент дочерних элементов, вы должны проверить значение:

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

Answer 2

$(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

Answer 3

Вот пример использования keyup для выбранного ввода. Он также использует обрезку, чтобы убедиться, что последовательность только пробельных символов не вызывает достоверного ответа. Это пример, который можно использовать для начала окна поиска или чего-либо, связанного с этим типом функциональности.

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

Answer 4

Вы можете попробовать что-то вроде этого:

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

Будет применяться событие .blur() только для входов с пустыми значениями.

Answer 5

В HTML 5 мы можем использовать новую функцию «required», просто добавив ее в тег, который вам требуется, например:

<input type='text' required>

Answer 6

Большая коллекция ответов, хотел бы добавить, что вы также можете сделать это с помощью :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, если у вас есть необходимые входы. Вы можете использовать эти селекторы, если вы используете обязательный атрибут на входе.

Answer 7

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