1

送信をクリックすると、最後の要素のエラーメッセージが表示されます（この場合、「探している性別を選択してください」とフォームの外の任意の場所をクリックすると、最初の要素のエラーメッセージが返されます。エラーメッセージが欲しい最初の無効な要素を表示するには、添付のコードを参照してください。

$(function () {
    var form = $('.register form');
    var checkNameResult = $('#checkname-result');
    var validator = form.validate({
        errorPlacement: function (error, element) {
            checkNameResult.empty();
            checkNameResult.append(error);
        }
    });

    $('#Register_UserName').rules("add", {
        required: true,
        remote: "/account/IsUsernameAvailable",
        messages: {
            required: "Please enter a name",
            remote: "Name is not available"
        }
    });
    $("#Register_FirstName").rules("add", {
        required: true,
        messages: {
            required: "Please enter your first name"
        }
    });
    $("#Register_LastName").rules("add", {
        required: true,
        messages: {
            required: "Please enter your last name"
        }
    });


    $("#Register_Password").rules("add", {
        required: true,
        messages: {
            required: "Please enter a valid password"
        }
    });

    $("#Register_Email").rules("add", {
        required: true,
        email: true,
        messages: {
            required: "Please enter your email address",
            email: "Please enter a valid email address"
        }
    });

    $("#Register_Gender_Male").rules("add", {
        required: true,
        messages: {
            required: "Please select your gender"
        }
    });

    $("#Register_InterestedInMale").rules("add", {
        required: function (element) {
            return $('#Register_InterestedInFemale:checked').length == 0;
        },
        messages: {
            required: "Please select an Interested In gender"
        }
    });

    $("#Register_InterestedInFemale").rules("add", {
        required: function (element) {
            return $('#Register_InterestedInMale:checked').length == 0;
        },
        messages: {
            required: "Please select a gender you are Looking For"
        }
    });

    $('#checkname').click(function () {
        if (validator.element($('#Register_UserName')))
            checkNameResult.html("<label class='name-available'>Name is available</label>");
        return false;
    });

});
4

1 に答える 1

0

私はこのようなフォームを検証しようとはしません。

jquery.validation プラグインを次のように使用します。

$(".selector").validate({
    rules: {
        name: "required",
        email: {
            required: true,
            email: true
        }
    },
    messages: {
        name: "Please specify your name",
        email: {
            required: "We need your email address to contact you",
            email: "Your email address must be in the format of name@domain.com"
        }
   }
});

Symfony2、Wordpress、CodeIgniter でテスト済みです。

于 2014-05-08T13:46:01.703 に答える