it-swarm.com.ru

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

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

Вот мой код:

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

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

Что я делаю неправильно?

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

Если вы уверены, что он всегда будет работать с элементом textfield, тогда вы можете просто использовать this.value.

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

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

693
meder omuraliev

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

$('#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. Удачи.

145
Alex Sexton

Делать это на размытие слишком ограничено. Предполагается, что фокус был сделан на поле формы, поэтому я предпочитаю делать это при отправке и отображать данные при вводе. После многих лет работы с причудливыми размытиями, фокусировкой и трюками, упрощение работы даст больше возможностей для использования там, где это важно.

$('#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..    
});
30
drewdeal
if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}
18
Graviton

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

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

почему никто не упомянул

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

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

8
Jamie Pate

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

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

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

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

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

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

4
Dave Ward

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

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

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

как это:

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

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

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

2
Mauro

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

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

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

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

1
Konstantin Kalbazov

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

0
Mark Carpenter Jr

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

<input type='text' required>

0
Atlantiz
<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>// :)
0
Maher