Проверьте, являются ли входные данные пустыми, используя 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потому что пустая строка в любом случае оценивается как false, но если вы хотите для удобства чтения:

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

кажется более jquery-как для меня

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

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

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

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

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

Это даже размещено на CDN Microsoft, для быстрой доставки: 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');
    }
});

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

Проверьте, все ли поля пусты, и добавьте 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 мы можем использовать новую функцию «required», просто добавив ее к тегу, который вам требуется, например:

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