56

requiredセクション内の()入力フィールドの空の値を確認し、jQueryを使用してイベントでそれらにクラスを追加するにはどうすればよいですか?これまでのところ、私は試しました:

jQuery("#sender_container input.required").val("").addClass("error");

しかし、それは値をチェックするのではなく、設定するようです。何か案は?

4

7 に答える 7

114
jQuery("#sender_container input.required").filter(function() {
    return !this.value;
}).addClass("error");​

なぜあなたはこのデモで見ることができるのにあなたが使わなければfilterならないのか[value=""]

その理由は次のとおりです。属性セレクターは、現在の状態ではなく、要素の初期状態をチェックします。(関数を使用して「初期」状態を変更できることに注意してください。ただし、attrこれは悪い習慣です。常に使用する必要がありますprop

したがって、入力値を変更しても、現在の値は属性セレクターに影響しません。賢明ではない...:)

ノート:

  • .val() フォーム要素の値を返し、jQueryチェーンを切断します。 $('selector').val().addClass('foo') エラー。戻り値は文字列\数値です。

  • .val(valueToSet) フォーム要素の値を設定し、jQueryチェーンを壊しません。
    $('selector').val("some value").addClass('foo')-有効、戻り値はjQueryです

于 2012-05-18T10:58:53.837 に答える
11
$('input:text[value=]','#sender_container').addClass('error');

デモ

于 2014-04-27T08:29:56.490 に答える
3
$('#sender_container input.required[value=""]').addClass('error')
于 2012-05-18T10:58:42.190 に答える
2
jQuery('#sender_container input.required[value=""]').addClass("error");

あなたはこれを試すことができます:

$('input:not([value!=""])').addClass('error');

デモ

注:この回答は使用しないでください。削除されなかった唯一の理由は、そこから学習できるようにするためです。

于 2012-05-18T10:58:08.707 に答える
0
$field = $("#sender_container input.required");
if( ! $field.val())
{
    $field.addClass("error");
}

この簡単な方法でうまくいくかもしれません。

于 2012-05-18T11:16:21.297 に答える
0

入力の初期属性値のみに基づいて選択する必要がある場合は、次のようにします。

var elements = $('#sender_container input.required[value=""]')

ただし、value属性が存在しない場合、これは機能しないことに注意してください。また、ユーザーまたはスクリプトによって変更された場合、現在の入力値では機能しません。

現在の入力値を取得したい場合は、jqueryfilter関数を使用できます。

var elements = $('#sender_container input.required').filter(function() {
  return this.value === '';

  // alternatively for "no value":
  // return !this.value;
})

jquery要素を選択したら、クラスを追加できます。

elements.addClass('error');
于 2016-02-10T10:13:21.560 に答える
0

すべてのフィールドを検査するために、これが役立つ場合があります。

$('#sender_container [required]').each(function(index)
{
       if (!($(this).val())) $(this).addClass('error');
}

});
于 2017-06-19T12:10:16.533 に答える