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

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

вот мой код:

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

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

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

438
jquery validation

16 ответов

$('#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 ключевое слово, если вы просто хотите ссылку на одинокий элемент (при условии, есть один textfield в потомки контексте/детей).

671

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

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

Если вы не используете .длина, тогда запись " 0 " может быть помечена как плохая, а запись из 5 пробелов может быть помечена как ok без $.отделка. Удачи.

140

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

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

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

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

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

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

Кажется мне более похожим на jquery

8

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

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

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

4

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

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

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

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

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

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

такой:

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

function checkForm() {
  return $('input[type=text]').filter(function () {
    return $(this).val().length === 0;
  }).length;
}
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
    }
}
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');
  }
});

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

2

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

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

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

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

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

<input type='text' required>

0