can-form Awesome forms for CanJS 

Why? • validations and error reporting is a pain • similar code written over and over again • how do you handle nested object structures? 

can-form • can-value is great, use it • behaves like the can.Component • composable / nestable (allows it to handle nested structures) • validations on the form (validations are bound to context) • simple error reporting and tracking 

API FormComponent.extend({ tag : 'simple-form', template : '', validate : { username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()] } }); {{#errors 'username'}}

{{#this}}
• {{ . }}
{{/this}}

{{/errors}} {{#errors 'password'}}

{{#this}}
• {{ . }}
{{/this}}

{{/errors}} Submit 

API FormComponent.extend({ tag : 'simple-form', template : '', validate : { username : [FormComponent.validationRules.presenceOf()], password : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.username' : [FormComponent.validationRules.presenceOf()], 'socialNetworks.*.network' : [FormComponent.validationRules.presenceOf()] } }); 

API {{#errors 'username'}}

{{#this}}
• {{ . }}
{{/this}}

{{/errors}} … ! {{#each socialNetworks}} // error reporting code here // error reporting code here {{/each}} Submit 

API FormComponent.extend({ tag : 'social-network', template : socialNetworkTemplate, validate : { username : [FormComponent.validationRules.presenceOf()], network : [FormComponent.validationRules.presenceOf()] } }) 

API {{#errors 'username'}}

{{#this}}
• {{ . }}
{{/this}}

{{/errors}} ! … ! {{#each socialNetworks}} {{/each}} ! Submit 

github.com/retro/can-form @mihaelkonjevic