6

フォームの必須フィールドごとにチェックしています。これを試しましたが、最初の入力でしか機能しません。入力ごとに機能させるにはどうすればよいですか？

if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}

EDIT：より多くのコンテキストについては、HTMLコードが変更されるたびに適用するために、この下にある別の関数を次に示します。

$('[required]').change(function() {
if($('[required]').val() != ''){ 
        $('.button1').fadeIn(0);
        $('.button2').fadeOut(0);
    }else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}
});

HTML

次のような入力がたくさんあります。

<input type="text" id="title" name="title" value="" required>
<input type="text" id="size" name="size" value="" required>
<input type="text" id="length" name="length" value="" required>

ボタン:

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

そのため、ページが読み込まれたとき、およびフィールドが変更されるたびに、空のフィールドをチェックしたいと考えています。

ところで、私はこれらの周りにフォームタグを持っていません.なぜならそれはモバイル用であり、それが何か違いを生むなら本当に必要だとは思わなかったからです.

再度、感謝します！

4

5 に答える 5

18

これ？

$( ':input[required]', yourForm ).each( function () {
    if ( this.value.trim() !== '' ) {
        // ...
    }
});

はyourFormFORM 要素への参照です (ここでセレクターを使用することもできます)。これがコンテキストです。フォーム内のフィールドのみを検索する必要があります。

于 2011-12-07T01:53:53.410 に答える
7

「変更」イベントは、SELECT ボックスおよび RADIO ボタン要素に対して機能しますが、INPUT 要素に対しては機能しません。入力フィールドを処理するには、「フォーカス/ぼかし」イベントを使用する必要があります。あなたの場合、「ぼかし」イベントは完全に適しています。

jQuery を使用して多くの要素を処理する場合は、CLASS ベースの操作を使用することをお勧めします。この場合、すべての入力フィールドに「必須」の同じクラスを追加し、そのクラスを使用してそれらのフィールドで操作を行います。

上記で指定したようにコード ブロックを調整しました。一度チェックしてから、更新されたコードも機能しない場合はお知らせください。更新されたコード ブロックは次のとおりです。

HTMLコード

<input type="text" id="title" name="title" value="" class="required">
<input type="text" id="size" name="size" value="" class="required">
<input type="text" id="length" name="length" value="" class="required">

<a class="button1" style="display:none" >button 1</a>
<a class="button2">button 2</a>

JS コード

$('.required').blur(function() {
  var empty_flds = 0;
  $(".required").each(function() {
    if(!$.trim($(this).val())) {
        empty_flds++;
    }    
  });

  if (empty_flds) {
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
  } else {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
  }
});

ここで作業コードを直接確認することもできます。

于 2011-12-07T06:23:14.430 に答える
1

each()関数 ( doc )を使用します。

$('[required]').each(function() {
    if($('[required]').val() != ''){ 
         $('.button1').fadeIn(0);
         $('.button2').fadeOut(0);
    }else{
         $('.button1').fadeOut(0);
         $('.button2').fadeIn(0);
    }
});
于 2011-12-07T01:51:15.520 に答える
1

各要素の値を取得する必要があります。それらのすべてが空でない場合は最初のことを行い、いずれかが空である場合は 2 番目のことを行います。正しいですか?

[未テスト]

// test if any of the values are not empty
var is_empty = false;
$('[required]').each( function(idx, elem) {
    is_empty = is_empty || ($(elem).val() == '');
});

// now do the thing, but only if ALL the values are not empty
if ( ! is_empty) {
    $('.button1').fadeIn(0);
    $('.button2').fadeOut(0);
}else{
    $('.button1').fadeOut(0);
    $('.button2').fadeIn(0);
}
于 2011-12-07T01:58:52.580 に答える
0

シンプルで、測定を追加するために赤い境界線を追加します

まずはスタイル作り

.redborder { border: 2px solid red; }

次に、Javascript の簡単なビット

// Remove all redborders
    $("#my_form :input.redborder").removeClass("redborder");
// Check all required fields have text, you can even check other values
    $("#my_form :input[required]").each(function() {
        if ($.trim($(this).val()) == "") $(this).addClass("redborder");
    });
// If any input has a red border, return
    if ($("#todo_edit_form .redborder").length > 0 ) return;
于 2014-02-06T20:08:45.847 に答える