Displaying errors in bootstrap collapse

[Jim S]

I have custom form where I'm placing the fields in different groups in a bootstrap 3 collapse (https://getbootstrap.com/docs/3.3/javascript/#collapse).

It is all working great except for when the user submits a form and an error occurs in one of the collapsed groups.  The result is that the form submit appears to do nothing because an error message popped up on a hidden element and the user can't see it.

I'm want to capture this somehow and notify the user that the submit is failing due to an error in the form.

But, I'm not sure how to capture the 'submit failed' event and then do some javascript magic to find the right way to notify the user.

Has anyone else tackled this problem in the past?

-Jim

[Jose C]

Hi Jim,

Just got a minute... I use something like this to scroll to and highlight the first field in a long form (but not within a Collapse structure).   Off the top of my head, you're submitting to web2py, so in the controller:

if form.process().accepted:
    <all good>
elif form.errors:
    focus_field = next(iter(form.errors.keys()))

return dict(........., focus_field=focus_field)

then, in the view:

    {{ if focus_field: }}
        <script>
            $(function() {
               $("[name='{{=focus_field}}']").focus();
            });
        </script>
    {{pass}}

Could something like that work in your case? On field focus, does the collapse open automatically?

HTH,

Jose

[Jim Steil]

Thanks Jose, I never thought of that.  I was trying to go straight javascript not remembering that I have the opportunity to do more in the controller when errors are returned.

I'll try it out tomorrow and report back.

-Jim

How about in your controller,

--
Resources:
- http://web2py.com
- http://web2py.com/book (Documentation)
- http://github.com/web2py/web2py (Source code)
- https://code.google.com/p/web2py/issues/list (Report Issues)
---
You received this message because you are subscribed to a topic in the Google Groups "web2py-users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/web2py/Gs5tr2lNIgQ/unsubscribe.
To unsubscribe from this group and all its topics, send an email to web2py+un...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/web2py/d189309d-a7e4-4fac-a007-02412532c1cco%40googlegroups.com.

[Jim S]

Thanks Jose for the idea.

Here is what I came up with:

if form.errors:
    panel_to_show = ''
    for field in form.errors:
        if field in ['w4_filing_status']:
            panel_to_show = 'collapseOne'
            break
        elif field in ['w4_two_jobs']:
            panel_to_show = 'collapseTwo'
            break
        elif field in ['w4_qualifying_dependents', 'w4_other_dependents']:
            panel_to_show = 'collapseThree'
            break
        else:
            panel_to_show = 'collapseFour'
            break


    response.js = '$("#collapseOne").collapse("hide"); $("#%s").collapse("show");' % panel_to_show

This is working well for me so far.  Again, many thanks to Jose for getting my mind in the right place on this.

-Jim

To unsubscribe from this group and all its topics, send an email to web2py+unsubscribe@googlegroups.com.

[Jose C]

Glad it helped, cheers.