我正在使用Twitter Boostrap,我正在尝试将jQuery Validation插件错误放在正确的元素中,而不是在HTML中对每个消息进行硬编码。
请在此处查看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'));
}
});
答案 0 :(得分: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."
},