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

Question

Twitter Bootstrap Validation message on textbox popover

Hi All,

I have tried a validation using bootstrap validation. this is my code

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

        }

    });

Now the error message display look like

The messages are showing bottom of the text box.

---

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

How can i do this with bootstrap validator ??

Note

I want this using by bootstrap validator , NOT Jquery Validator

Also i have tried this way : http://bootstrapvalidator.com/settings/#form-container

But not working !

Answer 1

The problem is in bootstrapValidator, described on github in issue #754 . You either need to use a newer version of the validator, or patch in that bug fix to your version, essentially adding container:'body' to the calls to Bootstrap tooltip/popover.

Otherwise, it's just a matter of adding this code to your bootstrapValidator call:

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

Working example here: http://jsfiddle.net/f2dqz95y/ (I didn't get as far as getting bootstrap fully working, so it still looks weird... but the popovers do work)