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

У всех есть правильная идея, но мне нравится быть немного более явным и обрезать значения.

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

если вы не используете .length, тогда запись '0' может быть помечена как плохая, а запись из 5 пробелов может быть отмечена как ok без $.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');
}

почему никто не упоминает

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

кажется мне более похожим на jQuery

вы также можете использовать.

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

Есть еще одна вещь, о которой вы могли бы подумать. В настоящее время она может добавлять класс предупреждения только в том случае, если она пуста, и как удалить класс снова, когда форма больше не пуста.

вот так:

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

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

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

Вместо этого используйте плагин проверки jQuery. Это может быть немного избыточно для простых обязательных полей, но достаточно зрело, что он обрабатывает граничные случаи, о которых вы даже не думали (и никто из нас не дошел бы до них).

Вы можете пометить обязательные поля классом "required", запустить $('form'). validate() в $(document).ready() и все, что требуется.

Он даже размещался на Microsoft CDN, для быстрой доставки: http://www.asp.net/ajaxlibrary/CDN.ashx

Вот пример использования 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
    }
}

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

Убедитесь, что все поля пусты и добавлены или отключены в Filter_button

Событие keyup обнаружит, удалил ли пользователь также поле (backspace), но backspace не вызывает событие нажатия клавиши в IE)

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

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

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

<input type='text' required>

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

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

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

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