Backbone + Bootstrap + Form Validation

Utilizes the Backbone ModelBinder plugin, an extendable Backbone.js View (form.validator.js), any Backbone Model and Twitter Bootstrap 2.0 HTML Markup conventions to allow for a simple way to indicate form validation errors using Twitter bootstrap tooltips and some CSS.

Notes

This code is not perfect. There are probably bugs; the idea is to present the idea of how to wrap bootstrap controls in backbone views/models and to prompt the viewer/reader to think about meta-programming.

Pull requests accepted :)

Usage

1. Create a new View that extends the FormValidator class and includes the standard Backbone ModelBinder plugin bindingsHash:

APP.Views.UserInfoForm=APP.Views.FormValidator.extend({el: "#user-info"bindingsHash: {// fieldName : selector"name" : "#name","age" : "#age","agreed" : "#agreed","bestPet" : "#best-pet"}});

2. Add rel="tooltip" and title attributes to the form nodes you will be tracking for validation, these are used by the FormValidator to drive messaging in the tooltips.

Note: This markup conforms to the Twitter Bootstrap Markup patterns.

<formid="user-info" class="form-horizontal"><fieldset><legend>All About Me</legend><divclass="control-group"><labelclass="control-label" for="name">Your Name</label><divclass="controls"><inputtype="text" class="input" id="name" rel="tooltip" title="Your name cannot be Bob." placeholder="anything but Bob will work"></div></div><divclass="control-group"><labelclass="control-label" for="age">Your Age</label><divclass="controls"><inputtype="number" class="input-small" id="age" rel="tooltip" title="Age must be between 1 and 100." min="0" max="100" step="1" placeholder="> 0 < 100"></div></div><divclass="control-group"><labelclass="control-label" for="agreed">I agree to terms</label><divclass="controls"><labelclass="checkbox"><inputtype="checkbox" id="agreed" rel="tooltip" title="You must agree. NOW!"></label></div></div><divclass="control-group"><labelclass="control-label" for="best-pet">The best pet is:</label><divclass="controls"><selectid="best-pet" rel="tooltip" title="Dogs are best!"><optionvalue="">something</option><optionvalue="cat">Cat</option><optionvalue="dog">Dog</option><optionvalue="ferret">Ferret</option><optionvalue="lizard">Lizard</option></select></div></div><divclass="form-actions"><buttontype="submit" class="btn btn-primary">Submit</button></div></fieldset></form>

3. Create a Backbone Model with a validate function that passes the name of the field if validation fails:

APP.Models.User=Backbone.Model.extend({defaults: {name: "Roy",age: 21,agreed: undefined,bestPet: "dog"},validate: function(attrs){if(attrs.name.toLowerCase()==="bob"){return"name";// convention for form.validator.js is that it uses the field values raised in these errors to lookup in the views bindingsHash}if(attrs.age<=0||attrs.age>100){return"age";}if(attrs.agreed===false){return"agreed";}if(attrs.bestPet!=="dog"){return"bestPet";}APP.trigger("valid:input");}});

4. Create an Instance of your new View and pass it a reference to a Backbone Model that maps to the attributes in your form:

varUser=newAPP.Models.User();varUserInfo=newAPP.Views.UserInfoForm({model: User});

Dependencies

1. jQuery 1.7.2
2. Underscore.js 1.3.2
3. Backbone.js 0.9.2
4. Backbone ModelBinder plugin
5. Twitter Bootstrap (css + js for the tooltip dependencies) 2.0

License / Usage

This code is made available free of charge. Do what you want with it :)