0

フォームのすべての入力をループし、それらが入力されているかどうかをチェックする関数があります。フィールドが空白の場合、その特定の入力をピンク色にして false を返します。

入力されていない入力の下に「フィールドが必要です」というメッセージを追加しようとしています。そのため、エラー メッセージを保持する div を使用して、各行の後に追加のテーブル行をコーディングしました。div の css は、ページの読み込み時に「display:none」に設定されます。

現在、私の関数は、空白の入力だけでなく、すべての入力に対して「必須」と表示されていますが、ピンクの色付けはまだ正しく機能しています。

ピンクのカラーリングのように、「必要な」divを正しく表示および非表示にするにはどうすればよいですか?

checkinputs = function (blockOne,blockTwo) {
inputGood = true;
blOne = $(blockOne);
blTwo = $(blockTwo);
blInput = [blOne,blTwo];
for (x = 0; x < 2; x++) {
        var validators = blInput[x].find(" [id$='RequiredIndicator']").parent().parent('tr').find(':input:not(:hidden)');
        var notAllFilled = validators.filter(function(){
        var myInput = $(this); //.parent().parent('tr').find(':input');
        var filledVal = myInput.val();
        var isFilled = $.trim(filledVal).length;
            if (isFilled) {
                $(this).css('background-color', 'white');

                $(this).closest('div').find('.required').hide();

                $(this).parent('td').prev('td').find('span').text('*'); 
                }
            else {
            $(this).css('background-color', 'pink');

            $(this).closest('div').find('.required').show();

             $(this).parent('td').prev('td').find('span').text('*');            
            inputGood = false;  
            }
        return isFilled;
        }).length;
    var inputCount = validators.length;
};
    if( !inputGood ){
        $('#errorAlert').append('<span style="font-weight:bold;">"Some required    information is missing. Please complete the missing fields below."</span>' + '<br><br>');
        $('#errorAlertTwo').append('<span style="font-weight:bold;">"Some required credit card information is missing. Please complete the missing fields below."</span>' + '<br><br>');    
    }
    return inputGood;   
};

ここに問題のフィドルがあります： http://jsfiddle.net/RNMM7/

4

1 に答える 1

0

あなたの問題は、ほぼ間違いなく、divを表示するための行です:

$(this).closest('div').find('.required').show();

この行の機能は次のとおりです。

  1. あなたの $(this) から始めて、最も近い先祖 [$(this) を含む] を div で見つけ、DOM ツリーを上っていきます
  2. その div の下でクラスが「required」のすべての要素を検索し、それらを表示します。

HTML がどのように構造化されているかを確認せずに、DOM ツリーの上にある最も近い div 要素がすべての .required 要素を包含すると推測します。そのステートメントの「div」を、$(this) と表示したい .required 要素のみを含む DOM ツリーの下位の要素に置き換える必要があります。

于 2013-05-01T15:48:49.590 に答える