web-dev-qa-db-ja.com

JQueryを使って入力が空かどうか確認する

すべてのフィールドに入力したいフォームがあります。フィールドをクリックしても入力しないと、赤い背景が表示されます。

これが私のコードです：

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

記入されているかどうかにかかわらず、警告クラスを適用します。

何がおかしいのですか？

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

空の文字列はとにかくfalseと評価されるので読みやすくするためにしたいのであれば、必ずしも.lengthを必要としないか、>0かどうかを確認してください。

$('#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キーワードを使用することにも注意してください（コンテキストの子孫に1つのテキストフィールドがある場合）。

700
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がなければOKとマークされます。幸運を祈ります。

147
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');
    }
});
13
Zigri2612

どうして誰も言わなかった

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

私にはもっとjqueryのようですね

8
Jamie Pate

キーアップイベントは、ユーザーがボックスをクリアしたかどうかも検出します（つまり、バックスペースはイベントを発生させますが、バックスペースはキープレスイベントを発生させません）。

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

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

代わりに jQuery検証プラグイン を使用することを検討してください。単純な必須フィールドではやややり過ぎかもしれませんが、まだ考えていないEdgeのケースを処理するのに十分なほど成熟しています（それらが発生するまで私たちの誰もがそうすることもできません）。

必須フィールドを "required"クラスでタグ付けし、$（document）.ready（）の中で$（ 'form'）。validate（）を実行すれば、それですべてです。

迅速な配信のために、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

もう1つ考えておきたいことがあります。現在、警告クラスが空の場合にのみ追加できます。フォームが空でなくなった場合はクラスを再度削除する方法について説明します。

このような：

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

すべてのフィールドが空かどうかを確認し、Filter_buttonにONまたはOFFを追加する

2
Mauro

これは、選択した入力にキー入力を使った例です。それは同様にトリムを使用して、ちょうど空白文字のシーケンスが真実の反応を引き起こさないことを確認します。これは、検索ボックスまたはその種類の機能に関連するものを開始するために使用できる例です。

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

たくさんの答えが集まっていますが、:placeholder-shown CSSセレクタを使ってこれを行うこともできることを付け加えたいと思います。特にすでにjQを使用していて、入力にプレースホルダがある場合は、IMOを使用するのが少しきれいになります。

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セレクターを使用することもできます。入力にrequired属性を使用している場合は、これらのセレクターを使用できます。

0
Mark Carpenter Jr

HTML 5では、私たちはあなたが要求されたいタグにそれを単に追加するという「要求された」新しい機能を使うことができます：

<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