Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Changes to caolan/forms #14

Closed
wants to merge 3 commits into from

2 participants

@vkareh

Hello caolan

Thanks for your forms node module! I really like the shorthand way for creating forms quickly. I made a few changes to it that I hope you'll like:

  • Added optional handlers for submit buttons and form method.

  • Changed a string.replace() to a regex (for element id) so that it replaces more than just the first underscore when creating the label.

  • Added documentation for the submit button.

Cheers!
vkareh

@ljharb
Collaborator

I've commented about the button widget - but in addition, the only valid form methods allowed should be /^(get|post)$/i, and you're not escaping double quotes in the form action, nor checking for URL validity (altho checking validity might be a bit much).

@ljharb
Collaborator

Closing since there's been a year with no response.

@ljharb ljharb closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
This page is out of date. Refresh to see the latest.
View
32 README.md
@@ -70,6 +70,38 @@ Would produce:
You'll notice you have to provide your own form tags and submit button, its
more flexible this way ;)
+If you would still like to add a form tag or a submit button, do it like so:
+
+ var forms = require('forms'),
+ fields = forms.fields,
+ widgets = forms.widgets,
+ validators = forms.validators;
+
+ var reg_form = forms.create({
+ username: fields.string({required: true}),
+ password: fields.password({required: true}),
+ confirm: fields.password({
+ required: true,
+ validators: [validators.matchField('password')]
+ }),
+ email: fields.email(),
+ login: fields.button({
+ label: 'Login',
+ widget: widgets.button({submit: true})
+ })
+ });
+
+ reg_form.method('post');
+
+This would add:
+
+ <form method="post">
+ ...
+ <div class="field">
+ <input type="submit" name="submit" id="id_submit" value="Login" />
+ </div>
+ </form>
+
Handling a request:
function myView(req, res){
View
8 lib/fields.js
@@ -50,7 +50,7 @@ exports.string = function(opt){
f.labelText = function(name){
var label = this.label;
if(!label){
- label = name[0].toUpperCase() + name.substr(1).replace('_', ' ');
+ label = name[0].toUpperCase() + name.substr(1).replace(/_/g, ' ');
}
return label;
};
@@ -139,3 +139,9 @@ exports.array = function(opt){
};
return f;
};
+
+exports.button = function(opt){
+ opt = opt || {};
+ var f = exports.string(opt);
+ return f;
+};
View
18 lib/forms.js
@@ -12,6 +12,12 @@ exports.validators = require('./validators');
exports.create = function(fields){
var f = {
fields: fields,
+ method: function(method){
+ f.method = method;
+ },
+ action: function(url){
+ f.action = url;
+ },
bind: function(data){
var b = {};
b.toHTML = f.toHTML;
@@ -82,9 +88,19 @@ exports.create = function(fields){
},
toHTML: function(iterator){
var form = this;
- return Object.keys(form.fields).reduce(function(html, k){
+ output = Object.keys(form.fields).reduce(function(html, k){
return html + form.fields[k].toHTML(k, iterator);
}, '');
+ // Add form tag if method is configured
+ var tags = '';
+ if (typeof form.method == 'string') {
+ tags = tags + ' method="' + form.method + '"';
+ }
+ if (typeof form.action == 'string') {
+ tags = tags + ' action="' + form.action + '"';
+ }
+ output = '<form' + tags + '>' + output + '</form>';
+ return output;
}
};
return f;
View
5 lib/render.js
@@ -2,7 +2,7 @@ var wrapWith = function(tag){
return function(name, field){
var label = this.label;
if(!label){
- label = name[0].toUpperCase() + name.substr(1).replace('_', ' ');
+ label = name[0].toUpperCase() + name.substr(1).replace(/_/g, ' ');
}
var html = '<' + tag + ' class="' + field.classes().join(' ') + '">';
if(field.widget.type == 'multipleCheckbox' ||
@@ -13,6 +13,9 @@ var wrapWith = function(tag){
field.widget.toHTML(name, field) +
'</fieldset>';
}
+ else if (field.widget.type == 'button') {
+ html += field.widget.toHTML(name, field);
+ }
else {
html += field.errorHTML() +
field.labelHTML(name, field.id) +
View
15 lib/widgets.js
@@ -193,3 +193,18 @@ exports.multipleSelect = function(opt){
}
return w;
};
+
+exports.button = function(opt){
+ var opt = opt || {};
+ var w = {};
+ w.classes = opt.classes || [];
+ w.type = 'button';
+ w.toHTML = function(name, f){
+ var f = f || {};
+ var html = opt.submit ? '<input type="submit"' : '<input type="button"';
+ html += f.label ? ' value="' + f.label + '"' : ' value="Submit"';
+ html += attrs({name: name, id: f.id, classes: w.classes});
+ return html + ' />';
+ }
+ return w;
+};
Something went wrong with that request. Please try again.