Làm cách nào để xác thực các trường nhập bằng Twitter Bootstrap 2.0 và áp dụng lớp lỗi?

Question

Tôi có một lĩnh vực như sau:

<div class="control-group"> 
    <label class="control-label" for="lname">Last Name</label> 
    <div class="controls"> 
     <input class="span3" type="text" id="lname" name="lname" placeholder="Last Name" value=""/> 
    </div> 
</div> 

Tôi đang cố gắng jquery sau đây để xác nhận một số đầu vào và thêm các lớp lỗi nếu cần thiết:

var div = $("#lname").parent("div.control-group"); 
.... 
div.removeClass("success"); 
div.addClass("error"); 

Lý tưởng nhất là tôi cần phải vòng qua nhiều nhập và chọn các trường để thực hiện xác nhận của tôi.

Mã hiện tại của tôi không thêm lớp lỗi. Bất kỳ ý tưởng tại sao?

Answer 1

Bạn nên sử dụng phương pháp parents thay vì parent như

var div = $("#lname").parents("div.control-group"); 
div.removeClass("success"); 
div.addClass("error"); 

Answer 2

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight: function (element, errorClass) { 
     $(element).parent().parent().addClass('error'); 
    }, unhighlight: function (element, errorClass) { 
     $(element).parent().parent().removeClass('error'); 
    }}); 

Answer 3

Sử dụng này jQuery-Live-Form-Validation-For-Twitter-Bootstrap

Khi bạn đưa các file js sử dụng mã này dưới đây

jQuery(function(){ 
      jQuery('#lname').validate({expression: "if (VAL) return true; else return false;", 
      message: "Please Enter Your Last Name"}); 
     });