如何使用 Twitter Bootstrap 2.0 验证输入字段并应用错误类？答案

【问题标题】：How can I validate input fields with Twitter Bootstrap 2.0 and apply error class?如何使用 Twitter Bootstrap 2.0 验证输入字段并应用错误类？
【发布时间】：2012-02-04 19:40:52
【问题描述】：

我有如下字段：

<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>

我正在尝试使用以下 jquery 来验证一些输入并在需要时添加错误类：

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

理想情况下，我需要遍历多个输入并选择字段来进行验证。

我当前的代码没有添加错误类。知道为什么吗？

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

您应该使用parents 方法而不是parent as

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

【讨论】：

【解决方案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');
    }});

【讨论】：

【解决方案3】：

使用这个jQuery-Live-Form-Validation-For-Twitter-Bootstrap

当你包含 js 文件时，使用下面的代码

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

【讨论】：