in jQuery

Knockout Validation with Bootstrap Popover

I wanted to use Twitter’s Bootstrap Popover’s to let the user know they need to enter values into each of the form’s inputs.
On top of Knockout’s Validation, I decided to create a custom Knockout binding that allows me to check if the Knockout observable is valid and either show or hide the popover with the error message.

See the image below for the final result.

Example of KO Validation with Popover

The mark up is

1
2
3
4
5
6
7
 <div class="row">
                            <div class="col-xs-6">
                                <div class="form-group" data-bind="validationElement: item.notes">
                                    <textarea id="notes" rel="validatePopover" data-position="right" class="form-control input-sm" rows="3" placeholder="Notes ..." data-bind="value: item.notes, validationPopUp: item.notes"></textarea>
                                </div>
                            </div>
                        </div>

If you would like the knockout custom binding code, please visit Github.