Wtyczka walidacji jQuery, umieszczanie błędów wewnątrz elementów macierzystych Bootstrap

Question

Używam Twittera Boostrap i próbuję umieścić błędy wtyczki walidacji jQuery w poprawnym elemencie zamiast każdej wiadomości, która jest zakodowana w HTML.

proszę zobaczyć jsfiddle tutaj: 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

Po pierwsze, pusty wszystkie wiadomości z kodem inline ale pozostawić span JEST W miejscu, ponieważ nie chcemy złamać układ zbyt dużo.

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

Następnie zmodyfikować errorPlacement zwrotnego następująco ...

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

Teraz wszystkie komunikaty zdefiniowane w .validate() zostanie użyta. Zwróć uwagę, jak zastąpiłem wartość reguły automatycznym symbolem zastępczym {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." 
}, 

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