1

入力タイプのテキストと、class = required のラジオボタンを含む html フォームがあります。フォームを検証しようとしています。フォームの送信時にフォームを検証する必要があり、false が返された場合は、新しい div (テキスト「必要なフィールドに入力してください」) を追加し、フィールドの下に赤で表示する必要があります。ユーザーがそのフィールドに入力すると、緑色になるか赤色が消えるはずです。jQuery は別の js ファイルにあります。したがって、送信ボタンをクリックすると、次のことを行っています

$('#test_form .required').filter(':visible').each(function() {
var input = $(this);
if($(this).is(':empty')){
    $(this).css("border","2px solid #FF0004");
    $(this).after('<div>Please fill in the required field</div>');
    return = false;
}else{
    return true;
}
});

現在、いくつかの問題が発生しています。1. 必要なテキストがフィールドの下に来ています。赤色とフォント サイズ - 10px が必要です。では、新しく追加された div に css を追加するにはどうすればよいですか? 2. 5 つのラジオ ボタンのラジオ グループがあるとします。したがって、少なくとも 1 つが選択されていない場合にのみ必要なテキストが必要であり、そのラジオ グループの下にテキストを表示します。これで、すべてのラジオ ボタンに必要なテキストが表示されます。3. また、ユーザーが [送信] を 4 回クリックすると、各フィールドにテキストが 4 回追加されます。これはフラグを使用して処理できると思います

誰でもこれについて私を案内してもらえますか?

4

2 に答える 2

0

jQuery 検証関数のerrorPlacementセクションを設定する必要があります。

$("#form").validate({
    rules: {
        name: {
            required: true
        },
        firstname: {
            required: true
        }
    },
    messages: {
        name: {
            required: "Enter name"
        },
        firstname: {
            required: "Enter firstname"
        }
    },
    errorPlacement: function ($error, $element) {
        var name = $element.attr("name");

        $("#error" + name).append($error);
    }
});

例: http://jsfiddle.net/R3aEQ/

于 2013-10-11T06:26:37.817 に答える