jQuery Validation plugin, placing errors within Twitter Bootstrap native elements

Question

I'm using Twitter Boostrap and am trying to place the jQuery Validation plugin errors within the correct element instead of each message being hard coded within the HTML.

Please see the jsfiddle here: 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

Firstly, empty all the message from your inline code but leave the span's in place since we don't want to break your layout too much.

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

Then modify your errorPlacement callback as follows...

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

Now all the messages defined within .validate() will be used instead. Notice how I replaced the rule's value with an automatic placeholder {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."
},

Working Demo: http://jsfiddle.net/yaEaF/6/