jQuery Validierungs-Plugin, Fehler in Twitter Bootstrap native Elemente

Question

Ich benutze Twitter Boostrap und versuche, die jQuery Validation Plugin-Fehler innerhalb der richtigen Element statt jede Nachricht fest im HTML-Code codiert zu platzieren.

Bitte beachten Sie die jsfiddle hier: 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

Erstens leer alle die Nachricht von Ihrem Inline-Code, aber lassen Sie die span ‚s an Ort und Stelle, da wir nicht zu viel Ihr Layout brechen wollen.

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

Dann ändern Sie Ihre errorPlacement Rückruf wie folgt ...

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

Nun sind alle innerhalb .validate() definierten Nachrichten werden stattdessen verwendet werden. Beachten Sie, wie ich den Wert der Regel durch einen automatischen Platzhalter {0} ersetzt habe.

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." 
}, 

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