jQuery Plugin di convalida, inserendo errori in Twitter Elementi nativi Bootstrap

Question

Sto usando Twitter Boostrap e sto cercando di inserire gli errori del plugin di validazione jQuery all'interno dell'elemento corretto invece di ogni messaggio che è hard coded all'interno dell'HTML.

prega di consultare la jsfiddle qui: 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

In primo luogo, vuoto tutto il messaggio dal codice inline, ma lasciare le span 's in atto dal momento che non vogliamo rompere il layout troppo.

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

quindi modificare il tuo errorPlacement richiamata come segue ...

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

Ora tutti i messaggi definiti all'interno .validate() saranno utilizzati invece. Si noti come ho sostituito il valore della regola con un segnaposto automatico {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." 
}, 

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