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

Question

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

Вот мой код:

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

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

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

Answer 1

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

И вам не обязательно нужно .length или посмотрите, является ли оно >0, поскольку пустая строка в любом случае оценивается как ложное, но если вы хотите для удобства чтения:

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

Answer 2

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

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

Answer 3

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

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

Answer 4

if ($('input:text').val().length == 0) {
      $(this).parents('p').addClass('warning');
}

Answer 5

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

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

Answer 6

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

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

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

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

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

как это:

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