9

私は Twitter Boostrap を使用しており、各メッセージが HTML 内にハードコードされるのではなく、正しい要素内に jQuery Validation プラグイン エラーを配置しようとしています。

こちらの jsfiddle を参照してください: http://jsfiddle.net/yaEaF/1/

$('#register').validate({
rules: {
    name: {
        minlength: 2,
        required: true
    },
    lname: {
        minlength: 2,
        required: true
    },
    username: {
        minlength: 2,
        required: true,
        remote: {
            url: '/setup/verify_username/',
            cache: false
        }
    },
    email: {
        required: true,
        email: true,
        remote: {
            url: '/setup/verify_email/',
            cache: false
        }
    },
    password: {
        required: true,
        minlength: 5,
        maxlength: 250
    },
    password2: {
        equalTo: '#password'
    },
    postal_code: {
        required: true,
        minlength: 5
    },
    timezones: {
        required: true
    },
    mp: {
        minlength: 10,
        required: true
    },
    gender: {
        required: true
    },
    dob: {
        required: true,
        date: true
    }
},
messages: {
    name: "Please enter your first name",
    lname: "Please enter your last name",
    username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least 2 characters"
    },
    email: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
    },
    password2: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long",
        equalTo: "Please enter the same passwords"
    },
    postal_code: "Please enter a valid zip code",
    timezones: "Please select a time zone",
    mp: "Please enter a valid mobile number. Only numbers please.",
    gender: "Please select a gender",
    dob: "Please enter a valid Date of Birth in mm/dd/yyyy format."
},
highlight: function (element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function (element, errorClass, validClass) {
    $(element).closest('.control-group').removeClass('error').addClass('success');
},
success: function (label) {
    $(label).closest('form').find('.valid').removeClass("invalid");
},
errorPlacement: function (error, element) {
    error.text(element.closest('.control-group').find('.help-block'));
}
});
4

1 に答える 1

13

まず、インライン コードからすべてのメッセージを空にしますspan。

<span class="help-block"></span>

次に、errorPlacementコールバックを次のように変更します...

errorPlacement: function (error, element) {
    element.closest('.control-group').find('.help-block').html(error.text());
}

内部で定義されたすべてのメッセージ.validate()が代わりに使用されるようになりました。ルールの値を自動プレースホルダーに置き換えたことに注目してください{0}。

messages: {
    name: "Please enter your first name",
    lname: "Please enter your last name",
    username: {
        required: "Please enter a username",
        minlength: "Your username must consist of at least {0} characters"
    },
    email: "Please enter a valid email address",
    password: {
        required: "Please provide a password",
        minlength: "Your password must be at least {0} characters long",
        maxlength: "Your password must be less than {0} characters long"
    },
    password2: {
        equalTo: "Please enter the same passwords"
    },
    postal_code: "Please enter a valid zip code",
    timezones: "Please select a time zone",
    mp: "Please enter a valid mobile number. Only numbers please.",
    gender: "Please select a gender",
    dob: "Please enter a valid Date of Birth in mm/dd/yyyy format."
},

実際のデモ: http://jsfiddle.net/yaEaF/6/

于 2013-02-11T21:47:55.260 に答える