使用自定义属性显示bootstrap工具提示

时间:2013-02-10 06:09:42

标签: jquery twitter-bootstrap

我有一张表格:

<form method="post" id="update_user_info" action="/Cabinet/Edit">
    <div class="modal-header">
        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
        <h3 id="myModalLabel">Modal Header</h3>
    </div>
    <div class="modal-body">
        <div class="span4 clear_mp">
            <div class="span2 pull-left clear_mp">
                <label for="FirstName">Name</label>
                <input type="text" value="John" name="FirstName" id="FirstName" />
            </div>
            <div class="span1 pull-right clear_mp">
                <label for="CarMark">Car</label>
                <input type="text" value="SUBARU LEGACY" name="CarMark" id="CarMark" />
            </div>          


            <div class="span1 pull-right clear_mp">
                <label for="Email">Email</label>
                <input type="text" value="test@mail.com" name="Email" id="Email" data-val-email="The email is wrong" data-val="true" class="input-validation-error" />
            </div>
            <div class="span2 pull-left clear_mp">
                <label for="PhoneNumber">Phone number </label>
                <input type="text" value="" name="PhoneNumber" id="PhoneNumber" data-val-regex-pattern="(\+)?77[0-9]{9}" data-val-regex="The phone number is wrong" data-val="true" />
                <span data-valmsg-replace="true" data-valmsg-for="PhoneNumber" class="field-validation-valid"></span>
            </div>

        </div>            
    </div>
    <div class="modal-footer">
        <input type="submit" value="Save" id="update_user_info" class="btn btn-large btn-primary" />
    </div>
</form>

我想做以下事项:
1.查找具有班级input的{​​{1}}(此处,我没有问题)
2.获取input-validation-error(*表示电子邮件或正则表达式或其他)属性的值,并在输入中显示带有此值的引导工具提示?

我该怎么做?

jsFiddle

上的标记

1 个答案:

答案 0 :(得分:0)

我不确定,你想做什么。无论如何,这可能是出发点:

$(document).ready(function(){
    $('input[data-val="true"]').each(function(i, elem){
        var theTitle = '';
        if ( $(elem).data('val-email') ) {
            theTitle = $(elem).data('val-email');
        } else if ( $(elem).data('val-regex') ) {
            theTitle = $(elem).data('val-regex');
        } else {
            theTitle = "Something is wrong here";
        }
        $(elem).tooltip({
            title: theTitle
        });
    });
});

这是jsFiddle

正在执行正则表达式模式,因为您没有在帖子中提及它。所以我假设,验证不是你问题的一部分。如果是,您可能想要提供一些关于您正在尝试做什么的更多细节。