Bootstrap and custom forms and widgets

[Matt]

Hi Everybody,

I'm using bootstrap for a project with web2py.

I want to create forms that mirror the standard approach taken by the bootstrap framework.

They wrap each "control" like so:

  <div class="control-group error">

        <label class="control-label" for="inputError">Input with error</label>

        <div class="controls">

          <input type="text" id="inputError">

          <span class="help-inline">Please correct the error</span>

          <p class="help-block">A comment for the field goes here.</p>

        </div>

      </div>

Since this is custom code I using form.custom and form.fields for output the HTML myself.

One small problem I've run up against in that when I do the following:

{{= form.custom.widget.full_name }}

If there is a form _error_ the following is output:

<input class="invalidinput" id="xyz_full_name" name="full_name" type="text" value="">

<div class="error" id="full_name__error">please enter their full name</div>

Is there anyway to suppress the div or change it so that it can become

<span class="help-inline">please enter their full name</span>

Instead?

Any help or suggestion for this would be greatly appreciated.

Thanks in advance,

Matt

[Anthony]

http://web2py.com/books/default/chapter/29/7#Hide-errors

Anthony

[Matt]

Brilliant thanks for that.

Matt

[Pystar]

Hi matt,

I have been working extensively with bootstrap with web2py and I can say the approach you are taking is the best way. 

This is my solution

#########controller####################3

form = SQLFORM(db.blahblah)

if form.accepts(request, session, hideerrror=True):

    blahblah

the hideerror=True is what does the magic.

It prevents your forms from displaying the error messages in the default position which is below the form field.

In your views, you can now display your error messages by doing

<span class="help-inline">{{=form.errors["post"]}}</span>

make sure you put the above in a conditional IF, ElSE block or else the errors will be displayed whether you have errors in your form or not

[Niphlod]

me too, but in a different way.

I'm working on an app and waiting for web2py 2.0 to release it to the public.
It contains a function able to serialize form in "bootstrap" styles (i.e. form-horizontal, form-vertical, form-inline) ....
With some additional work maybe that could be included to provide more than the current 'table3cols', 'table2cols', 'divs', 'ul' styles of the forms.

Right now it's called into the view, i.e.:

{{=twitter_form(form, 'form-vertical')}}

[Alec Taylor]

Hi Niphlod,

Now that web2py 2 has been released, could you release the code for your form manipulation?

Thanks a heap,

Alec taylor

[Niphlod]

the code is out there on github.com/niphlod/w2p_tvseries, but included in web2py 2.0.6 there is other code for bootstrap-compatible forms

[Alec Taylor]

Thanks, but I can't seem to find anything in the release about how to use bootstrap with forms:  https://groups.google.com/forum/#!topic/web2py/0Uk5b34LUsc 

(Note that I'm using crud.create and crud.update)

--
 
 
 

[Niphlod]

should be formstyle='bootstrap', the same way you use formstyle=divs , ul, etc

[Alec Taylor]

Unfortunately that didn't work:

<type 'exceptions.TypeError'> create() got an unexpected keyword argument 'formstyle'

<type 'exceptions.TypeError'> update() got an unexpected keyword argument 'formstyle'

--
 
 
 

[Anthony]

For Crud, it's a setting:

 

crud.settings.formstyle = 'bootstrap'

Anthony

[Anthony]

Also, you can now create your own formstyle function, which should take the form object and a list of field tuples (each field tuple includes the id, label, controls, and comment for the field) and return the DOM you want displayed in the form (i.e., the part that goes inside <form></form>). Internally, this is how all the formstyles now work (each has its own function). To see how they work, check out the code: http://code.google.com/p/web2py/source/browse/gluon/sqlhtml.py#651.

Anthony

[Alec Taylor]

Thanks, in that case I think I've found a bug in that formstyle setting.

Around my submit button it has drawn a white rectangle; I've been able to extract it into a test-case:  http://jsfiddle.net/AlecTaylor/7whPt/ 

--
 
 
 

[Anthony]

I don't think it's a bug. The submit button is in a div with class "form-actions", and bootstrap.css defines the background color of that class as whiteSmoke. You can override that with your own CSS rule for the "form-actions" class.

Anthony

[Alec Taylor]

Thanks, set it to this and it's now working:

.form-actions {
    background-color: #d9edf7;
    border-top: 0;
    padding: 0;
}​ 

--