Plugin Xác thực jQuery, đặt lỗi trong các phần tử gốc Twitter Bootstrap

Question

Tôi đang sử dụng Twitter Boostrap và đang cố gắng đặt các lỗi plugin Xác thực jQuery trong phần tử chính xác thay vì mỗi thư được mã hóa cứng trong HTML.

Hãy xem jsfiddle đây: 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

Thứ nhất, trống tất cả các tin nhắn từ mã nội tuyến của bạn nhưng để lại span 's tại chỗ vì chúng ta không muốn phá vỡ bố cục của bạn quá nhiều.

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

Sau đó sửa đổi errorPlacement callback của bạn như sau ...

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

Bây giờ tất cả các tin nhắn được định nghĩa trong .validate() sẽ được sử dụng để thay thế. Lưu ý cách tôi thay thế giá trị của quy tắc bằng trình giữ chỗ tự động {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 làm việc: http://jsfiddle.net/yaEaF/6/