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

How can I validate input fields with Twitter Bootstrap 2.0 and apply error class?

本文关键字：字段 应用 错误 输入 验证 Twitter 何使用 Bootstrap      更新时间：2023-09-26

我有一个如下所示的字段：

<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");

理想情况下，我需要循环通过几个输入和选择字段来进行验证。

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

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

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

$('#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');
    }});

使用此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"});
        });
相关文章：