carbon-form
CarbonJS Forms / The carbon-form
module provides easy-to-use forms in your projects. It is a complete solution which not only provides rendering but filtering and validation too. It packs all the logic behind HTML forms and it abstracts a lot of work so that you can focus on building awesome web applications and best of all it allows you to define the layout and style your forms any way you want them.
If you have ever used Zend_Form
before you're going to be familiar with the syntax and if not just keep reading.
Installation
npm install carbon-form [--save]
Usage
The usage is pretty simple. You create a form and then add elements to it. For each element you define a set of options such as name, label, filters, validators, HTML attributes etc. The following example should present most of carbon-form
features.
signup-form.js
)
Defining the form (file: First you need to define your form and elements that it will contain.
var Form = ;var Filter = ;var Validate = ; moduleexports = { var form = options; form; form; form
signup-form.jade
)
Defining form layout (file: Since carbon-form
gives you freedom to style your own forms any way you wish, you can define form layout in the separate file and then tell to carbon-form
where to look for this file. When the form renders it will use this layout as a template.
.form-group div label(for="#{elements.name.getName()}") != elements.name.getLabel() div != elements.name.render() .form-group div label(for="#{elements.email_address.getName()}") != elements.email_address.getLabel() div != elements.email_address.render() .form-group div label(for="#{elements.password1.getName()}") != elements.password1.getLabel() div != elements.password1.render() .form-group div label(for="#{elements.password2.getName()}") != elements.password2.getLabel() div != elements.password2.render() .form-group div != elements.submit.render()
carbon-framework
)
Validation and rendering (using This example features carbon-framework
just to make it easier for you to understand how carbon-form
works in reality. Of course you can use carbon-form
with any other Node.js framework or no framework at all.
module { return signupAction: { var postData = reqbody; var form = viewiewScriptPaths: resviewPaths ; form; } }
Elements
The carbon-form
currently supports 6 HTML form elements (Button
, Checkbox
, Hidden
, Password
, Text
, Textarea
) and 4 extended elements (EmailAddress
, Link
, Recaptcha
, Switch
).
Subforms
Depending on how you organize your forms you can nest one or more forms within a single form.
var Form = ; var form = ;var buttons = ; parentForm;
Contributing
If you're willing to contribute to this project feel free to report issues, send pull request, write tests or simply contact me - Amir Ahmetovic
Licence
This software is available under the following licenses:
- MIT