Question

I am trying to use forms module https://github.com/caolan/forms . I could easily get the forms created without any issues. But I am just wondering how do you add a new class name to the existing field. The documentation talks about the overriding the id. But I could not find a way to add a new class to the tag.

tried the following..but it wont work!

  username: fields.string({
    required: true,
    label: 'So What',
    classes: ['classtest']
    }),

There is a attribute called widget (which in turn has attribute ‘classes’) for field. But could not get it working either. This is what I tried. Which also failed.

username: fields.string({
required: true,
label: 'So What',
widget: {
  classes: 'testclass'
}
}),

Any help in this regard would help. Ultimately i am trying to style the forms with bootstrap

Answer 1

It looks like the module doesn’t allow classes anywhere except at the widget level. Use the following to apply classes to the input box (ie. widget).

username: fields.string({
    required: true,
    label: 'So What',
    widget: forms.widgets.text({
        classes: ['testclass']
    })
})

The current form module API provides no way to extend the classes that are placed on the surrounding div element. Here is a bit of stack trace as to how I found it out:

1. lib/fields.js#L68 calls forms.render.div
2. forms.render.div calls field.classes().join(‘ ‘)
3. field.classes() returns a rigid array of classes. The only options are field, error, and required.