caolan / forms Goto Github PK

I know that someone filed an issue about this (#44) Has it been merged? Any news on this? Thanks

I changed the arguments form.toHTML takes to make it behave recursively (which breaks some test). Also added qs to dependencies.

Updated simple.js to demonstrate:
https://github.com/lukeburns/forms

Hey there! Glad to find another fan of Django's form model. I see sharing validation on the client is a stated goal. Any progress? Thoughts on a direction? The biggest wins for me would be validating fields client side on loss of focus to display errors immediately, and tying in the forms isValid state to enable and disable form submission.

I'm happy to code up some directions to see how they feel.

Hi,

First off, big thank you for this very useful, easy to understand library, especially for a node.js newbie like me.

I'm creating my own validator to make a field required based on a condition tied to another field.

Unfortunately, the validation doesn't happen since the field is empty. So I'd suggest to change the code to NOT bypass the validation if the field is empty yet has entries under 'validators.'

Example:

     b.validate = function (form, callback) {

        var check_validators = function() {
            async.forEachSeries(b.validators || [], function (v, callback) {
                if (!b.error) {
                    v(form, b, function (v_err) {
                        b.error = v_err ? v_err.toString() : null;
                        callback(null);
                    });
                } else {
                    callback(null);
                }
            }, function (err) {
                callback(err, b);
            });
        }

        if (raw_data === '' || raw_data === null || typeof raw_data === 'undefined') {
            // don't validate empty fields, but check if required
            if (b.required) { b.error = 'This field is required.'; }
            else check_validators();
            process.nextTick(function () { callback(null, b); });
        } else {
            check_validators();
        }
    };

Hi, I use node.js with express (expressjs.com). When I tried your forms module it worked great if I used GET as form method. But when I tried to use POST instead it did not work.
I looked at your code an come to the conclusion that somewher inside this if-statement things did not work out:
else if(obj.method === 'POST'){
var buffer = '';
obj.addListener('data', function(chunk){
buffer += chunk;
});
obj.addListener('end', function(){
f.handle(querystring.parse(buffer), callbacks);
});
}

I got stuck there so it will not run my success, error or empty code.

But I think I have solved the issue by changing the if-statement to:
else if(obj.method === 'POST'){
f.handle(obj.body, callbacks);
/*
var buffer = '';
obj.addListener('data', function(chunk){
buffer += chunk;
});
obj.addListener('end', function(){
f.handle(querystring.parse(buffer), callbacks);
});
*/
}

Do you know if this change is bad in any way?

I'm playing with this plugin in my first node/express app, thanks for putting it out there!

Question: I have a form that submits back to the same URL (handled for both GET and POST). When it fails validation, I want it to re-render the form with the submitted values, and that works well. But when it succeeds, and writes the submitted values, I want to show the form again, but this time empty, to add another entry. How would I do this?

Thanks

Really small thing. The casing is wrong in the validator docs. minlength, maxlength, and rangelength are specified as minLength, maxLength, and rangeLength in the docs.

Add i18n support

Using: NodeJS 0.4.12, Express: 2.4.7

//controller.js, imported into app.js

var forms = require('../lib/forms'),
    fields = forms.fields,
    validators = forms.validators;

var signupForm = forms.create({

    first_name: fields.string({ required: true }),
    last_name: fields.string({ required: true }),
    email: fields.email({ required: true }),
    password: fields.password({ required: true }),
    password_confirm: fields.password({
        required: true,
        validators: validators.matchField('password')
    })

});

module.exports = function(app) {

    app.get('/signup', function(req, res, next) {
        res.render('signup', {
            signupForm: form.toHTML()
        });
    });

    app.post('/signup', function(req, res, next) {
        signupForm.handle(req.body, {
            success: function(form) {
                res.redirect('/app');
            },
            other: function(form) {
                res.render('signup', {
                    form: form.toHTML()
                });
            }
        });
    });
};

I've been seeing some strange behaviour, here's the steps to reproduce:

1. Create form
2. Open one browser and fill in the form, so it fails validation.
3. Open a different browser, visit the '/signup' route and the form will be pre populated, showing data that the other browser (user) entered. Potentially displaying sensitive user info to another user.

Seems like the original signupForm object is being modified when bound to a request's form data?

I have a very large form, and it should be outputed using jQuery tabs. So I need to divide it into chunks, and output each chunk in a specific place. I've created three form objects and have rendered html for each of them, but in this case I need to perform three validations for each form object.

> Boolean('false')
true

oops … doesn't seem right in lib/fields.js:96.

In my models I have: customer: {
name: String,
phone: String,
contact: String,
email: {
type: String,
index: { unique: false},
validate: /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/,
},

nI can@t defin a field like this:
...
title: fields.string({required: true}),
customer: {
email: fields.email(),
name: fields.string(),
}

I got error.. how can i fix it?

The id of a field is not taken into account for the for attribute of the corresponding label, just the name.

If you create multiple bound forms on a single page by creating an array of forms and iterating over it calling toHTML() on each. Each form is rendered with the data from the final form in the array.

The problem appears to be in the rendering process, rather than the binding process. if you dump the form objects after binding each one, you can see that the the correct data is bound to each.

I would like to add extra markup and other changes to certain fields in my templates. How can I individually render the fields of a form in my template? Thanks

// Something like this
{% for field in formObj.fields %}
{% if field.widget.type === 'email' %}
... do something else
{% endif %}
{% endfor %}

I'm trying to use this and want type="tel" and type="email". Both are in master but there hasn't been a version bump on npm in a months. I totally understand if there's other work to be done before next release, so I may just use GH as the package source (I've had issues with that in the past so I try to avoid it). Thanks!

It seems like the validators can only apply to particular fields, and while each validator has access to the whole form, it would be useful to have form-wide validation for more complex rules. For instance, I have a form that requires exactly one out of a list of fields to be filled and the rest empty. Having something like a second argument to forms.create where such a validator could be specified would be really helpful. Just a function(form, callback) would be fine. What do you think?

Hi,

thanks for form.js, but used with connects methodOverride I get problems with PUT.

It will ignore PUT and throw an error.

regards,
Nox

Would be useful if the built in widgets allowed custom attributes to be configured.

Maybe something like the classes option

{
    classes: ['my_class', 'another_class']
  , attributes: { readonly: 'readonly' }
}

Please add the Github web service hook as described on https://ci.testling.com - the package.json changes are in commit 7976a19

The test handle ServerRequest POST in test-form.js fails on node v0.10.0 with the following error:

TypeError: Cannot read property 'readable' of undefined
    at IncomingMessage._read (http.js:345:19)
    at IncomingMessage.Readable.read (_stream_readable.js:293:10)
    at IncomingMessage.read (http.js:337:15)
    at IncomingMessage.<anonymous> (_stream_readable.js:698:45)
    at IncomingMessage.EventEmitter.emit (events.js:92:17)
    at emitDataEvents (_stream_readable.js:724:10)
    at IncomingMessage.Readable.on (_stream_readable.js:656:5)
    at Object.f.handle (/Users/christian/code/forms/lib/forms.js:63:29)
    at Object.exports.handle ServerRequest POST (/Users/christian/code/forms/test/test-form.js:276:7)
    at Object.<anonymous> (/Users/christian/code/forms/node_modules/nodeunit/lib/core.js:235:16)

The problem seems to be that http.IncomingMessage requires a socket as the first parameter.

Hello

I was asking myself how to add the file field (to upload an image) and then save the name in the DB ?
Is their a widget or a right way to do it ?

For the moment my code looks like this (it works, but lacks of the support of file field)

forms = require "forms"
fields = forms.fields
validators = forms.validators
widgets = forms.widgets

workForm = forms.create(
  title: fields.string(required: true)
  format: fields.string(required: true)
  technique: fields.string(required: true)
  sold: fields.string(
    required: false
    widget: widgets.checkbox()
  )
)

WorkForm = exports.WorkForm = workForm

i found this mulitple where a multiple should be, I made it spin.

http://i.imgur.com/7MYuK.gif

Default widgets should have a function that translate text. This function would be specified in some sort of configuration.

As of now, I have to "reimplement" all the widgets (copy paste them) just to surround a text with my function to translate it.

Exemple:
In the multipleSelect widget I have to surround 'f.choices[k]' width my function which gives 'i18next.t(f.choices[k])'

Validation logic for requiring one of either fields to be filled, but not requiring both necessarily has to be done outside of the form definition.

While not a big deal, since it feels like the purpose of validators is to save the programmer to add extra validation logic outside from form creation, it would be nice to have the possibility to define a validator that gets executed when field.data is empty and the field is not required.

I'm creating a "class that inherits" from the express.request, and has almost the same methods and attributes, but when you do a request instanceof http.IncomingMessage it's false of course, and I can't use it in form.handle. couldn't the check inside handle happen without trying to guess the instance of the request? like:

    // instead of 
    } else if (obj instanceof http.IncomingMessage) {
    // use
    } else if ((typeof obj.body !== 'undefined' || typeof obj.url !== 'undefined') && typeof obj.method !== 'undefined') {

all tests are passing OK: 570 assertions (1433ms) and this makes the code work with any HTTP request mock, without the actual manual instantiating of IncomingMessage. since it's the body, url and method members of the request that is important, that should suffice.

Hello,

I am looking for a clean way to customize template for input rendered. Have you an idea?

Thanks by the way for your librairie.

This is currently somewhat tedious. Not only there no way to call simply call "form.FOOFIELD.toHTML()" and have it print the html in a template, when writing the field html tags manually, you would want to persist the user's input in case of an error, so you would need to do something like this:

<input type="question" value="<%= form.data.question %>">

This will cause problems in some template languages however (like EJS) when the form is unbound, and therefore form.data does not exist. I suggest that the data dictionary should exist anyway, and contain empty strings, or null/undefined values.

On a somewhat related note, the "empty" callback currently is only called if no request object is passed; the example in the readme makes it sound like it is supposed to be called if the given request object contains no data. I understand the latter might be hard to determine due to GET and POST (a user might have a page with a querystring and a form that POSTs), but depending on how the design is supposed to work, I suggest that the example in the readme be updated to something like:

 if (QuestionForm.handle(req.method == 'POST' ? req : undefined, {
    empty: function() {  ... }
 }):

As the empty example currently stands, a user is likely to find that empty is not called the way he expects to.

Using the forms, it seems to not support any generic security validations out of the box, i.e. csrf validation, captcha etc. It would be great if this can be added as a feature.

http://localhost/test.html fails

registry.npmjs doesn't have 0.1.1. Can you please publish the latest version?

I am using a responsive design framework and need the <p/> tag for the error message to contain a 'span2' class to define its width constraints. The code does not allow me to specify any class names https://github.com/caolan/forms/blob/master/lib/fields.js#L53

I can't figure out how to create a fake request object to pass to form.handle in order to test this functionality, introduced in e0ac2f0.

The gap was discovered thanks to #48.

forms.create({
    username: forms.fields.string({
      required: true
    })
});

does not result in <input required="true"> in the HTML. While this can be achieved by setting the widget manually after the fact, it seems counter intuitive to me that passing options to the widget requires an extra step.

Changing 17, 98, 119 of lib/fields.js from forms.widgets.___() to forms.widgets.___(opt) provides what is, in my opinion, more intuitive default behavior.

This also requires String(opt[k]).replace(...) in widgets.js:31, to convert "true" and similar into strings.

node example/simple.js doesn't work as specified in README and I get this error -

➜ forms git:(master) ✗ node example/simple.js

node.js:201
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.
at Function. (module.js:378:11)
at Object. (/tmp/forms/example/simple.js:3:8)
at Module._compile (module.js:441:26)
at Object..js (module.js:459:10)
at Module.load (module.js:348:31)
at Function._load (module.js:308:12)
at Array.0 (module.js:479:10)
at EventEmitter._tickCallback (node.js:192:40)
➜ forms git:(master) ✗

However, it works with the following changes -

➜ forms git:(master) ✗ diff example/simple.js example/simple.js.1
3,4c3,4
< require.paths.push(__dirname + '/../lib');

< require.paths.push(__dirname + '/../deps');

//require.paths.push(__dirname + '/../lib');
//require.paths.push(__dirname + '/../deps');
10c10

< forms = require('forms'),

forms = require('../lib/forms'),

➜ forms git:(master) ✗ node example/simple.js.1
The "sys" module is now called "util". It should have a similar interface.
Server running at http://127.0.0.1:8080/

I am using node 0.6.15. Is this a bug?

Very useful option for iphone keyboards

I get this error when I try and use toHTML() on the form I created.

var create_form = forms.create({
title: fields.string({required: true}),
price: fields.number({required: true}),
desc: fields.string({
required: true,
widget: {
type: 'textarea'
}
})
});

console.log('create_form :: '+ create_form.toHTML());

This is my first dig at node js forms.
I am trying to look up tables in database and make a form for each table and i am able to generate the form but I am unable to add div's to separate the different tables.

I have the right break point to get to the point of adding div's but I am unable to understand how to add this.

Here is the snippet ..

var forms = require('forms');
var myFields = forms.fields, myValidators = forms.validators, myWidgets = forms.widgets, myRenderers = forms.render;

                                    if (typeof Table.table_name != 'undefined' && typeof Table.DATA_TYPE != 'undefined'){
                                            var type, renderer;
                                            if (Table.DATA_TYPE.match(/char/)){
                                                    type = myFields.string({required: true});
                                            }else if(Table.DATA_TYPE.match(/text/)){
                                                    type = myFields.string({ widget: myWidgets.textarea({rows: 6})});
                                            }else if(Table.DATA_TYPE.match(/int/)){
                                                    type = myFields.number({required: true});
                                            }
                                            //response.write('Type ' + type );

                                            if (profileTables.getIndex(Table.table_name) == -1 ){
                                                    profileTables.push(Table.table_name);
                                                    /* I DONT KNOW HOW TO ADD <DIV> TAG HERE */
                                                    var divtag='({<div id=' + Table.table_name + '>})';
                                                    var rend=myFields.string(divtag);
                                                    renderer = myRenderers.div(Table.table_name,rend);
                                                    response.write('RENDERER ' + renderer.toHTML);
                                                    jsonObject[renderer];
                                            }
                                            var column = Table.column_name;
                                            jsonObject[column]=type;

                      }

Appreciate any help on this.

• Shekar

I am able to generate the form details

So, the message for required fields is hardcoded. I suggest to add extra option for fields requiredMessage (or something like this) to setting it. It's simply to implemet by changing this line this way:

if (b.required) { b.error = 'This field is required.'; }

to

if (b.required) { b.error = b.requiredMessage || 'This field is required.'; }

The library node-validator has many advantages that can be use in your forms.

Firstly, it has so much more validations than 'forms'.

Secondly, it provides a lot of sanitization functions that can be help to work with the data in the forms.

https://github.com/chriso/node-validator

Hi,

I'd like to create a slightly different form for each user. Something like:
var userHomeForm = forms.create({
email : fields.email({
label : i18n.__('Email'),
value : user.email,
}),
});
It has the user's email pre-filled. If I put the form in global level, other users can see the user's email.
So I thought about creating the form in each request of the page, and save it in the user's session. something like:
req.session.userHomeForm = userHomeForm;

However, when I retrieve the form for processing:
var userHomeForm = req.session.userHomeForm;
userHomeForm.handle(req, {
success : function (form)

The handle is not found. It seems all the field values are preserved in the session, but not the functions like handle, bind, toHTML etc.

Something I do wrong here? Or is it a bug?

Thanks.

Thank you for your module - it's fantastic; however the tag that you uploaded to NPM is 2 years old.

Do you plan on updating the npm repository?

Is it possible to set the value of a widget? I tried several variations on the following:

forms.create({
    _csrf: forms.widgets.hidden({ value: 'a csrf token' })
}).toHTML()

I assume that I'm doing it wrong, so I asked a question on SO showing my other attempts. @ljharb mentioned in #70 that this should be simple, but I'm not feeling too bright right now. I tried using fields.string({ type: hidden, value: 'a csrf token' }), but that's not right either.

When .toHTML() is called on a form that includes a password widget, it creates a tag like <input type="password" value="my secret password">. I think it would be more prudent to not output the value for password widgets.

When editing a database object, I want to fill the form with the object's current values, to be edited. Doesn't seem to be supported currently.

Great library!! It's possible add a new type (date), with a nice widget datepicker and validations?

Sorry for my english!

Attribute values with quotes in them (such as JSON) cause the outputted html to be invalid. For example, the following will output invalid html:

var forms = require('forms');
var fields = forms.fields;
var widgets = forms.widgets;

var form = forms.create({
  data: fields.string({required: true, widget: widgets.hidden()})
});

form.bind({data: '{"hello": "world"}'}).toHTML();

I believe this is due to /lib/widgets.js:28, but the surrounding code would suggest that the value attribute is specifically left unescaped as the others are subjected to .replace(/"/g, '"'). Is this intentional?

Currently the code is forced to insert the error message before the input field https://github.com/caolan/forms/blob/master/lib/render.js#L11

I'd like to be able to place the error message at the end of a form field not in the beginning.

Hi!

Wouldn't you take care of making the code usable at client-side? The require()ment of 'http' et al. is of pure node concern (and can be opted); and 'async' is feasible only in validation routines (afaics). These two stops so far the subj.

TIA for feedback,
--Vladimir

I've had a good look through the code and can't find anything representing help style text? Text that would go directly beneath a field to explain the content in the field for example.

Is this something you're interested in?