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

Question

文本框popover

上的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'
                    }
                }
            }

        }

    });

现在错误消息显示为

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

---

  

我想在** popover中显示此消息，如下图所示**

如何使用 bootstrap validator ??

执行此操作

注意

  

我希望 bootstrap validator 使用此功能，而不是 Jquery Validator

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

但不工作！

Answer 1

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

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

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

这里的工作示例：http://jsfiddle.net/f2dqz95y/（我没有达到让引导程序完全正常工作，所以它仍然看起来很奇怪......但是弹出窗口确实有效）