0

単純な論理のように思えますが、どうすれば理解できないのですか。私はこれに2時間以上遅れており、何も機能していないようです..フォームの検証を行っています。フォームの送信時に、フィールドが空かどうかを確認します。空の場合は、フィールドにクラスを追加して赤くし、新しい div を作成してエラー メッセージを表示します。これにはいくつかの問題があります。私は IE8 でテストしていますが、addClass は動作していません。以下はコードスニペットです

var first =  true;
if(first == true){
$('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
        $(this).after('<div class="error_text">Required</div>');
        first = false;
        return false;
    }else{
        return true;
    }
});
}
else{
  $('#submit_form .required').filter(':visible').each(function() {
    var input = $(this);
    if($(this).is(':empty')){
        $(this).css("border","1px solid #FF0004");
        //$(this).addClass("highlight");
                  //I ned to remove the Required text here or else it will get added twice.
        $(this).after('');
                  //Add the text here
                    $(this).after('<div class="error_text">Required</div>');
        return false;
    }else{
        return true;
    }
});
}

したがって、ユーザーが初めて送信ボタンをクリックすると、 first = true が検証され、フィールドが空の場合は、その赤い枠線とテキストも表示されます。これはうまくいっています。ユーザーがいくつかのフィールドに入力して再度送信すると、入力されていない必須フィールドがいくつかあります。したがって、入力されたフィールドから境界線と必須テキストを削除し、赤と必須を表示する必要があります。今は空です。私は非常に多くのことを試しましたが、これにはうんざりしています。どういうわけか、これについて正しいロジックが得られません。そこにいる誰かがこれで私を助けることができますか？検証プラグインを使用したくありません。

4

1 に答える 1

1

存在する<div>場合、削除したい要素は、チェックしている要素（this参照している要素）の次の要素であるため、これを実行して削除できるはずです。

$(this).next('div.error_text').remove();

余談ですが、関数から値を返したい場合は、return trueorreturn falseにする必要があります。等号 ( =) を使用するのは正しくありません。

firstjQuery は要素が存在しない場合の処理​​に優れているため、このロジックは不必要に思えます。コード全体を次のように単純化できます。

var returnValue = true;
$('#submit_form .required').filter(':visible').each(function () {
    var input = $(this);
    input.next('div.error_text').remove();
    input.removeClass('highlight');
    if (input.is(':empty')) {
        input.addClass('highlight');
        input.after('<div class="error_text">Required</div>');
        returnValue = false;
    }
});
return returnValue;

highlight次に、クラスの次の CSS :

.highlight {
    border: 1px solid #ff0004;
}

上記ではreturnValue変数を使用していることに注意してください。これは、に渡される無名関数があり、その内部で.each()呼び出すとreturn falseループの実行が終了するだけで、フォームの送信が妨げられないためです。

于 2013-10-11T09:55:18.873 に答える