jQuery验证插件，将错误放入Twitter Bootstrap本机元素

Question

我正在使用Twitter Boostrap，并试图将jQuery验证插件错误放入正确的元素中，而不是将每个消息硬编码到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')); 
} 
}); 

Answer 1

首先，空所有的消息，但留在原地的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/