javascript - 文本框弹出窗口上的 Twitter Bootstrap 验证消息

Question

文本框弹出窗口上的 Twitter Bootstrap 验证消息

大家好，

我尝试过使用 Bootstrap 验证进行验证。这是我的代码

HTML

  <form role="form" id="book-form" class="land-form">
                                <div class="form-group">
                                    <input type="text" name="contactname" class="form-control" id="t1" placeholder="Name">
                                </div>
                                <div class="form-group">
                                    <input type="text" name="contactemail" class="form-control" id="t2" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="text" name="contactphonenumber" class="form-control" id="t3" placeholder="Phone Number">
                                </div>
                                <div class="form-inline">
                                    <div class="form-group">
                                        <div class='input-group date' id='datetimepicker1'>
                                            <input type='text' name="contactdate" class="form-control date" id="t4" placeholder="Date" />
                                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                                            </span>
                                        </div>
                                    </div>

                                    <div class="form-group" style="display: inline-block; vertical-align: top;">
                                        <select class="form-control col-md-3" name="guests">
                                            <option>--No of Guests--</option>
                                        </select>

                                    </div>
                                </div>
                                <div class="form-group text-right">
                                    <button type="submit" class="btn book-btn">Book Your Ticket</button>
                                </div>
                            </form>

JS

$('#book-form').bootstrapValidator({
        //        live: 'disabled',       
        message: 'This value is not valid',
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            contactname: {
                validators: {
                    notEmpty: {
                        message: '*Required Field'
                    }
                }
            },
            contactphonenumber: {
                validators: {
                    notEmpty: {
                        message: '*Required Field'
                    }
                }
            },
            contactdate: {
                validators: {
                    date: {
                        format: 'MM/DD/YYYY',
                        message: 'The value is not a valid date'
                    }
                }
            },
            email: {
                validators: {
                    notEmpty: {
                        message: '*Required Field'
                    },
                    emailAddress: {
                        message: 'The input is not a<br> valid email address'
                    }
                }
            }

        }

    });

现在错误消息显示如下

消息显示在文本框的底部。

<小时/>

I want to Show this message in **popover, Look like the below image**

如何使用 bootstrap validator 执行此操作??

注意

I want this using by bootstrap validator, NOT Jquery Validator

我也尝试过这种方式:http://bootstrapvalidator.com/settings/#form-container

但不工作!

Answer 1

问题出在 bootstrapValidator 中，在 github 上描述为 issue #754 。您要么需要使用较新版本的验证器，要么将该错误修复修补到您的版本中，本质上是将 container:'body' 添加到对 Bootstrap 工具提示/弹出框的调用中。

否则，只需将此代码添加到您的 bootstrapValidator 调用中即可:

$('#book-form').bootstrapValidator({
       container: 'popover',
       //rest of your options
});

此处的工作示例:http://jsfiddle.net/f2dqz95y/ (我还没有让 Bootstrap 完全正常工作，所以它看起来仍然很奇怪......但是弹出窗口确实可以工作)